Menu
Getting Started
Adapters
Guides & Concepts
Community Resources
Examples
ESLint
Plugins
API Reference

React Query Kit

🕊️ A toolkit for ReactQuery that makes ReactQuery hooks reusable and typesafe

what do you benefit from it

  • Make queryKey strongly related with queryFn
  • Manage queryKey in a type-safe way
  • Generate a custom ReactQuery hook quickly
  • Make queryClient's operations clearly associated with custom ReactQuery hooks
  • Set defaultOptions for custom ReactQuery hooks easier and clearer

Installation

This module is distributed via NPM and should be installed as one of your project's dependencies:

bash
$ npm i react-query-kit
# or
$ pnpm add react-query-kit
# or
$ yarn add react-query-kit

Quick start with nextjs

CodeSandbox

ts
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.