🕊️ A toolkit for ReactQuery that makes ReactQuery hooks reusable and typesafe
queryKey
strongly related with queryFn
queryKey
in a type-safe wayqueryClient
's operations clearly associated with custom ReactQuery hooksThis module is distributed via NPM and
should be installed as one of your project's dependencies
:
npm i react-query-kit
or
pnpm add react-query-kit
or
yarn add react-query-kit
import { QueryClient, dehydrate } from '@tanstack/react-query'import { createQuery } from 'react-query-kit'
type Response = { title: string; content: string }type Variables = { id: number }
const usePost = createQuery<Response, Variables, Error>({ primaryKey: '/posts', queryFn: ({ queryKey: [primaryKey, variables] }) => { // primaryKey equals to '/posts' return fetch(`${primaryKey}/${variables.id}`).then(res => res.json()) }, suspense: true})
const variables = { id: 1 }
export default function Page() { // queryKey equals to ['/posts', { id: 1 }] const { data } = usePost({ variables, suspense: true })
return ( <div> <div>{data?.title}</div> <div>{data?.content}</div> </div> )}
console.log(usePost.getKey()) // ['/posts']console.log(usePost.getKey(variables)) // ['/posts', { id: 1 }]
export async function getStaticProps() { const queryClient = new QueryClient()
await queryClient.prefetchQuery(usePost.getKey(variables), usePost.queryFn)
return { props: { dehydratedState: dehydrate(queryClient), }, }}
Check the complete documentation on GitHub.
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out