02 - useLazyLoadQuery

Learn how to fetch GraphQL data with Relay.

Exercise

Fetch the following query inside your App component using Relay useLazyLoadQuery and render the content of each post.

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

The Relay Environment is already set up in relay/Environment.tsx and provided by Providers.tsx. The loading state is handled by <Suspense> and the error state by <ErrorBoundaryRetry> in Root.tsx.

The graphql tags are compiled in your browser by the real Relay compiler (Rust → WebAssembly). Compiler errors show up right away.

Extras

handle error (try a typo in a field name, or break the network layer)
use variables: query AppQuery($first: Int!)

Next: useFragment →

auto run

Loading editor…

localhost:7500 · in-browser GraphQL server

latency

Checks verify your solution against the running app.

○App uses useLazyLoadQuery
○Relay sends AppQuery to the server
○Renders the content of the 10 posts