DEV Community

React Query: How to organize your keys

Red Ochsenbein (he/him) on August 01, 2022

If you're using React Query you certainly know how the useQuery hook works. Some example similar to the ones you find in the React Query documentat...

Read full post

Jack • Aug 1 '22

Best thing to do is to create specific functions for your queries:

export const useTodo = (id: string) => {
  return useQuery(['todo', id], () => fetchTheTodos(id));
}

const { data: todos } = useTodo(props.id);

and so on.

Hooks are composable so make the most of it.

Red Ochsenbein (he/him) • Aug 1 '22 • Edited

This will not help you when trying to invalidate the query. Of course you could create a invalidate function/hook for each query, too. But then the pattern starts to look not much different from what I'm proposing.

Or you can even use a combination of both: Create custom hooks PLUS use the key/query objects.

Jack • Aug 1 '22

Invalidation is a whole other problem for sure. I usually have an invalidate hook that invalidates all queries within a certain domain i.e.

const invalidate = useInvalidateBasketQueries();

return useQuery(key, fn, { onSuccess: invalidate });

I've been using react query (and vue query) since day 1 and it's important we get some good/consistent patterns in place

Ivan Jeremic • Aug 2 '22

Invalidating is easy why not just,

const queryClient = useQueryClient();

queryClient.invalidateQueries(["key"]);

Works for me with normal queries and custom hooks.

Red Ochsenbein (he/him) • Aug 2 '22

Yes sure. But how would make sure that keys stay consistent in your mid-size to large React application? What if the key used by the query at another place of the application (by another person)? How do you make sure the invalidation also gets updated?
This is what my pattern tries to solve.

Ivan Jeremic • Aug 2 '22

I don't understand what you mean by "invalidation also gets updated" what you mean by updated? Or do you mean other devs on your team will accidentally use an already existing key for a different query?

dikamilo • Aug 2 '22

I prefer to create a separate key map per API namespace. It's looks like this:

export const myzoneKeys = {
  all: ['myzone'] as const,

  profile: (profileId: string | undefined) =>
    [...myzoneKeys.all, profileId || 'no-profile'] as const,

  myList: (profileId: string | undefined) =>
    [...myzoneKeys.profile(profileId), 'my-list'] as const,

  recommendations: (profileId: string | undefined) =>
    [...myzoneKeys.profile(profileId), 'recommendations'] as const,

  recommendationsDetail: (profileId: string | undefined) =>
    [...myzoneKeys.profile(profileId), 'recommendations-detail'] as const,

  recentlyWatched: (profileId: string | undefined) =>
    [...myzoneKeys.profile(profileId), 'recently-watched'] as const,

  recentlyWatchedChannel: (profileId: string | undefined) =>
    [...myzoneKeys.recentlyWatched(profileId), 'channel'] as const,

  recentlyWatchedProgram: (profileId: string | undefined) =>
    [...myzoneKeys.recentlyWatched(profileId), 'program'] as const,

  recentlyWatchedRecording: (profileId: string | undefined) =>
    [...myzoneKeys.recentlyWatched(profileId), 'recording'] as const,

  recentlyWatchedVod: (profileId: string | undefined) =>
    [...myzoneKeys.recentlyWatched(profileId), 'vod'] as const,
};

In complex apps, this have several advantages:

I can invalidate whole namespace (since in this case is per user profile) using all key
I can invalidate all recently watched queries using recentlyWatched key, since all other recently watched keys are based on this
I can invalidate single query be specific key name
It's constant and easy to use and understand in react query devtools

Also, I don't use useQuery across the app. I create custom query hooks in single API packages divided to API namespace and use it in app.