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

3.0.0-rc.2

feat: support infer type of router property
feat: optimize router's code

3.0.0-rc.1

Feature

router

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

Usage

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

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

  list: router.infiniteQuery({
    fetcher: (
      variables: { active: boolean },
      { pageParam }
    ): Promise<{
      projects: { id: string; name: string }[]
      nextCursor: number
    }> => {
      return fetch(
        `/posts/?cursor=${pageParam}?active=${variables.active}`
      ).then(res => res.json())
    },
    getNextPageParam: lastPage => lastPage.nextCursor,
    initialPageParam: 0,
  }),

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

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

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

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

API Reference

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

3.0.0-beta.3

types: export type Fetcher

3.0.0-beta.2

feat: compatible with v4 types

3.0.0-beta.1

feat: make queryKey not undefined in middleware

3.0.0-beta.0

Breaking Changes

• use fetcher instead of queryFn
• remove exposed methods queryFn,queryKeyHashFn and getPrimaryKey

Migration

Upgrading from ReactQueryKit 2 → ReactQueryKit 3

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

What you benefit from ReactQueryKit 3

• Support hierarchical key
• Support infer the types of fetcher, you can enjoy the preferred types automatically.

You can see the v3 docs here: https://github.com/liaoliao666/react-query-kit/tree/v3#readme.

2.0.10

feat: compatible with v4 types

2.0.9

fix: type TQueryKey in getOptions
fix: compatible with suspense mode of v4