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:

shell

npm i react-query-kit

shell

pnpm add react-query-kit

shell

yarn add react-query-kit

Quick start with nextjs

CodeSandbox

tsx

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),
    },
  }
}