);
}
```
Copy and paste the working GraphQL query into the file and define a new `query` variable on top of the `App` function.
```javascript
const query = `
{
pageCollection {
items {
title
logo {
url
}
}
}
}
`
```
To make requests and connect functional React component to a particular state, add an import statement at the beginning of the file to import the React hooks `useState` and `useEffect`.
```javascript
import {useState, useEffect} from "react";
```
Go into `App` and define some initial state using `useState`.
```javascript
function App() {
// define the initial state
const [page, setPage] = useState(null);
// show a loading screen case the data hasn't arrived yet
if (!page) {
return "Loading...";
}
// return statement and JSX template.
// ...
}
```
`useState` allows you to define an initial state value. It returns the current value and a setter method for the specified data. Every time you call the returned setter (`setPage` in this case) React rerenders the functional component.
At this stage, the React application always shows a loading message because you're not fetching any data yet. To retrieve the page entry stored in Contentful, use `useEffect` to perform a request and set the returned data using `setPage`.
> **Info**
>
> While we recommend using an advanced GraphQL client-side library for complex applications, the cross-browser-supported [`window.fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) method provides all the functionality you need for this tutorial.
Define the URL endpoint (`https://graphql.contentful.com/content/v1/spaces/[YOUR_SPACE_ID]/`) as the first function argument and pass in headers and additional configuration.
```javascript
function App() {
const [page, setPage] = useState(null);
useEffect(() => {
window
.fetch(`https://graphql.contentful.com/content/v1/spaces/[YOUR_SPACE_ID]/`, {
method: "POST",
headers: {
"Content-Type": "application/json",
// Authenticate the request
Authorization: "Bearer [YOUR_ACCESS_TOKEN]",
},
// send the GraphQL query
body: JSON.stringify({ query }),
})
.then((response) => response.json())
.then(({ data, errors }) => {
if (errors) {
console.error(errors);
}
// rerender the entire component with new data
setPage(data.pageCollection.items[0]);
});
}, []);
if (!page) {
return "Loading...";
}
// return statement and JSX template.
// ...
}
```
> **Info**
>
> A detailed explanation of `useState` and `useEffect` is not part of this tutorial. To learn more about this React functionality, read [the official React documentation](https://reactjs.org/docs/hooks-intro.html), or watch the official React documentation.
With the addition of `window.fetch` called in `useEffect` the `App` component fetches GraphQL data from Contentful. But it is not rendering it yet. The last step is to update the returned JSX template to use the data. Change the logo URL and the hardcoded text to use `page.title` and `page.logo.url`.
The final state of your Contentful-connected React component now looks as follows:
```javascript
import { useState, useEffect } from "react";
import "./App.css";
const query = `
{
pageCollection {
items {
title
logo {
url
}
}
}
}
`;
function App() {
const [page, setPage] = useState(null);
useEffect(() => {
window
.fetch(`https://graphql.contentful.com/content/v1/spaces/[YOUR_SPACE_ID]/`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer [YOUR_ACCESS_TOKEN]",
},
body: JSON.stringify({ query }),
})
.then((response) => response.json())
.then(({ data, errors }) => {
if (errors) {
console.error(errors);
}
setPage(data.pageCollection.items[0]);
});
}, []);
if (!page) {
return "Loading...";
}
// render the fetched Contentful data
return (