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

2.0.8

Changes

feat: automatically infer TQueryData by TQueryKey
feat: include TError in the return type of getOptions
feat: using useSuspenseQuery instead of useQuery in v5

Benefit from ReactQuery v5

Automatically infer TQueryData from TQueryKey

const useTest = createQuery({
  primaryKey: 'test',
  queryFn: () => `string`,
})

const data = queryClient.getQueryData(useTest.getKey())
//     ^? const data: string | undefined

Register a global error

declare module '@tanstack/react-query' {
  interface Register {
    defaultError: AxiosError
  }
}

const useTest = createQuery({
  primaryKey: 'test',
  queryFn: () => `string`,
})

const { error } = useTest()
//      ^? const error: AxiosError | null

2.0.7

feat: compatible error
feat: compatible DefinedUseInfiniteQueryResult
feat: adjust throwOnError logic in suspense mode