Overhead of using react-query hooks

[denisborovikov]

There's a react-query-kit library. It provides a createQuery factory that allows to create useQuery hook and provides additional API.

Something like

const usePost = createQuery({
  primaryKey: 'posts',
  queryFn: () => {}
)

Along with the standard useQuery return, hooks return setData, an alias for queryClient.setQueryData but with query client and query key built in.

const { setData } = usePost()

// set cache
setData(data)

I'm considering adding additional helpers to this API, like invalidateQuery, ensureQuery etc.

The question is - how much overhead of using react-query hook if we use only helper but not other props like data, isLoading etc.

const { invalidateQuery } = usePost({ enabled: false })

// set cache
invalidateQuery()

Because using the hook creates a subscription and does additional work. Does this API worth using? There can be many additional usages of this hook instead of the regular

const queryClient = useQueryClient()
queryClient.invalidateQueries(["posts"])

[TkDodo]

it creates an observer, it will re-render your component whenever new changes to this query come in (even with enabled: false). What you could do is notifyOnChangeProps: [] to opt out of re-rendering, but there's still overhead of managing observers.

I'd rather go the way that trpc or zodios are going and offer type-safe versions of the queryClient, based on an up-front defined api definition. In case of trpc, this definition happens on the server. For zodios, it can be on the server or on the client.

[denisborovikov]

Interesting. Thank you for the feedback!