Search…

Auto

StartRC

Router

Query

Docs

Partners

React React

Latest

Search…

latest

React React

Latest

React Example: Basic Graphql Request

Github StackBlitz CodeSandbox

Code ExplorerCode

Interactive SandboxSandbox

public
src
- index.tsx
.gitignore
README.md
eslint.config.js
index.html
package.json
tsconfig.json

tsx

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import {
      QueryClient,
      QueryClientProvider,
      useQuery,
      useQueryClient,
    } from '@tanstack/react-query'
    import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
    import { gql, request } from 'graphql-request'

    const endpoint = 'https://graphqlzero.almansi.me/api'

    const queryClient = new QueryClient()

    type Post = {
      id: number
      title: string
      body: string
    }

    function App() {
      const [postId, setPostId] = React.useState(-1)

      return (
          <p>
            As you visit the posts below, you will notice them in a loading state
            the first time you load them. However, after you return to this list and
            click on any posts you have already visited again, you will see them
            load instantly and background refresh right before your eyes!{' '}
            <strong>
              (You may need to throttle your network speed to simulate longer
              loading sequences)
            </strong>
          </p>
          {postId > -1 ? (
          ) : (
          )}
      )
    }

    function usePosts() {
      return useQuery({
        queryKey: ['posts'],
        queryFn: async () => {
          const {
            posts: { data },
          } = await request<{ posts: { data: Array<Post> } }>(
            endpoint,
            gql`
              query {
                posts {
                  data {
                    id
                    title
                  }
                }
              }
            `,
          )
          return data
        },
      })
    }

    function Posts({
      setPostId,
    }: {
      setPostId: React.Dispatch<React.SetStateAction<number>>
    }) {
      const queryClient = useQueryClient()
      const { status, data, error, isFetching } = usePosts()

      return (
          <h1>Posts</h1>
            {status === 'pending' ? (
              'Loading...'
            ) : status === 'error' ? (
              <span>Error: {error.message}</span>
            ) : (
              <>
                  {data.map((post) => (
                    <p key={post.id}>
                      <a
                        onClick={() => setPostId(post.id)}
                        href="#"
                        style={
                          // We can find the existing query data here to show bold links for
                          // ones that are cached
                          queryClient.getQueryData(['post', post.id])
                            ? {
                                fontWeight: 'bold',
                                color: 'green',
                              }
                            : {}
                        }
                      >
                        {post.title}
                      </a>
                    </p>
                  ))}
                <div>{isFetching ? 'Background Updating...' : ' '}</div>
              </>
            )}
      )
    }

    function usePost(postId: number) {
      return useQuery({
        queryKey: ['post', postId],
        queryFn: async () => {
          const { post } = await request<{ post: Post }>(
            endpoint,
            gql`
            query {
              post(id: ${postId}) {
                id
                title
                body
              }
            }
            `,
          )

          return post
        },
        enabled: !!postId,
      })
    }

    function Post({
      postId,
      setPostId,
    }: {
      postId: number
      setPostId: React.Dispatch<React.SetStateAction<number>>
    }) {
      const { status, data, error, isFetching } = usePost(postId)

      return (
            <a onClick={() => setPostId(-1)} href="#">
              Back
            </a>
          {!postId || status === 'pending' ? (
            'Loading...'
          ) : status === 'error' ? (
            <span>Error: {error.message}</span>
          ) : (
            <>
              <h1>{data.title}</h1>
                <p>{data.body}</p>
              <div>{isFetching ? 'Background Updating...' : ' '}</div>
            </>
          )}
      )
    }

    const rootElement = document.getElementById('root') as HTMLElement
    ReactDOM.createRoot(rootElement).render(<App />)

[Want to Skip the Docs?

“If you’re serious about really understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg?s=tanstack)