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 ( <QueryClientProvider client={queryClient}> <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 ? ( <Post postId={postId} setPostId={setPostId} /> ) : ( <Posts setPostId={setPostId} /> )} <ReactQueryDevtools initialIsOpen /> </QueryClientProvider> )}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 ( <div> <h1>Posts</h1> <div> {status === 'pending' ? ( 'Loading...' ) : status === 'error' ? ( <span>Error: {error.message}</span> ) : ( <> <div> {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> <div>{isFetching ? 'Background Updating...' : ' '}</div> </> )} </div> </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 ( <div> <div> <a onClick={() => setPostId(-1)} href="#"> Back </a> </div> {!postId || status === 'pending' ? ( 'Loading...' ) : status === 'error' ? ( <span>Error: {error.message}</span> ) : ( <> <h1>{data.title}</h1> <div> <p>{data.body}</p> </div> <div>{isFetching ? 'Background Updating...' : ' '}</div> </> )} </div> )}const rootElement = document.getElementById('root') as HTMLElementReactDOM.createRoot(rootElement).render(<App />)
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 ( <QueryClientProvider client={queryClient}> <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 ? ( <Post postId={postId} setPostId={setPostId} /> ) : ( <Posts setPostId={setPostId} /> )} <ReactQueryDevtools initialIsOpen /> </QueryClientProvider> )}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 ( <div> <h1>Posts</h1> <div> {status === 'pending' ? ( 'Loading...' ) : status === 'error' ? ( <span>Error: {error.message}</span> ) : ( <> <div> {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> <div>{isFetching ? 'Background Updating...' : ' '}</div> </> )} </div> </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 ( <div> <div> <a onClick={() => setPostId(-1)} href="#"> Back </a> </div> {!postId || status === 'pending' ? ( 'Loading...' ) : status === 'error' ? ( <span>Error: {error.message}</span> ) : ( <> <h1>{data.title}</h1> <div> <p>{data.body}</p> </div> <div>{isFetching ? 'Background Updating...' : ' '}</div> </> )} </div> )}const rootElement = document.getElementById('root') as HTMLElementReactDOM.createRoot(rootElement).render(<App />)
