3.3.1

fix: method is incompatible with of Tanstack Query v5.59.x

3.3.0

Disabling Queries

See changes: feat: support skipToken

To disable queries, now you can pass skipToken as the option variables to your custom query. This will prevent the query from being executed.

import { skipToken } from '@tanstack/react-query'

const [name, setName] = useState<string | undefined>()
const result = usePost({
  variables: id ? { id: id } : skipToken,
})

// and for useQueries example
const queries = useQueries({
  queries: [usePost.getOptions(id ? { id: id } : skipToken)],
})

3.2.2

fix: register global error type is not work in nextjs

3.2.1

fix(react-query v4): inferVariables & inferFnData are not working
fix(react-query v4): remove keepPreviousData from suspense query

3.2.0

feat: ability to pass unknow[] into router as the key
fix(react-query v4): remove placeholderData from suspense query

3.1.3

fix: infered mutation options has invalid variables type

3.1.2

fix: mutate requires arguments if middleware is used

3.1.1

feat: optimize types of router

3.1.0

feat: nest router

3.0.0

Announcing ReactQueryKit 3.0

The new version comes with a lot of improvements:

• Support hierarchical key
• Support infer the types of fetcher, you can enjoy the preferred types automatically.
• Support to create a shape of your entire API

Migration

Upgrading from ReactQueryKit 2 → ReactQueryKit 3

createQuery({
-  primaryKey: 'posts',
-  queryFn: ({ queryKey: [_primaryKey, variables] }) => {},
+  queryKey: ['posts'],
+  fetcher: variables => {},
})

What is the difference between fetcher and queryFn?

ReactQueryKit would automatically converts fetcher to queryFn, as shown below:

const usePosts = createQuery({
  queryKey: ['posts'],
  fetcher: (variables, context) => {
    // ...
  },
})

// => usePosts.getOptions(variables):
// {
//   queryKey: ['posts', variables],
//   queryFn: (context) => fetcher(variables, context)
// }

New API router

router which allow you to create a shape of your entire API

Usage

import { router } from 'react-query-kit'

const post = router(`post`, {
  byId: router.query({
    fetcher: (variables: { id: number }) =>
      fetch(`/posts/${variables.id}`).then(res => res.json()),
    use: [myMiddleware],
  }),

  list: router.infiniteQuery({
    fetcher: (_variables, { pageParam }) =>
      fetch(`/posts/?cursor=${pageParam}`).then(res => res.json()),
    getNextPageParam: lastPage => lastPage.nextCursor,
    initialPageParam: 0,
  }),

  add: router.mutation({
    mutationFn: async (variables: { title: string; content: string }) =>
      fetch('/posts', {
        method: 'POST',
        body: JSON.stringify(variables),
      }).then(res => res.json()),
  }),
})

// get root key
post.getKey() // ['post']

// hooks
post.byId.useQuery({ variables: { id: 1 } })
post.byId.useSuspenseQuery({ variables: { id: 1 } })
post.list.useInfiniteQuery()
post.list.useSuspenseInfiniteQuery()
post.add.useMutation()

// expose methods
post.byId.getKey({ id: 1 }) // ['post', 'byId', { id: 1 }]
post.byId.getFetchOptions({ id: 1 })
post.byId.getOptions({ id: 1 })
post.byId.fetcher({ id: 1 })
post.add.getKey() // ['post', 'add']
post.add.getOptions()
post.add.mutationFn({ title: 'title', content: 'content' })

// infer types
type Data = inferData<typeof post.list>
type FnData = inferFnData<typeof post.list>
type Variables = inferVariables<typeof post.list>
type Error = inferError<typeof post.list>

Merging Routers

import { router } from 'react-query-kit'

const user = router(`user`, {})
const post = router(`post`, {})

const k = {
  user,
  post,
}

API Reference

type Router = (key: string, config: TConfig) => TRouter

Expose Methods

• query
  Similar to createQuery but without option queryKey
• infiniteQuery
  Similar to createInfiniteQuery but without option queryKey
• mutation
  Similar to createMutation but without option mutationKey