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