Learn Relay/
02 →

01 - Fetch GraphQL

Learn how to fetch GraphQL data without Relay.

Exercise

Fetch the following query inside your App component using only React (fetch, useState, useEffect), then render the content of each post.

query {
  posts(first: 10) {
    edges {
      node {
        id
        content
      }
    }
  }
}

The GraphQL server runs (in your browser!) at config.GRAPHQL_URL. It expects a POST request with a JSON body:

fetch(config.GRAPHQL_URL, {
  method: 'POST',
  headers: { 'Content-type': 'application/json' },
  body: JSON.stringify({ query, variables: {} }),
});

Open the Network tab to see your requests reach the server.

Extras

  • handle error
  • handle retry using a button to retry the network request
  • handle pagination
Next: useLazyLoadQuery →
Loading editor…
localhost:7500 · in-browser GraphQL server
Checks verify your solution against the running app.
  • ○App sends a POST request to the GraphQL server
  • ○Query fetches posts(first: 10) with id and content
  • ○Renders the content of the 10 posts