Discussion on: React Query: How to organize your keys

[dikamilo]

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.

[Red Ochsenbein (he/him)]

I really like this approach. Thanks for sharing.

[Braulio Diez]

I think this post explain the concept mentioned by @dikamilo tkdodo.eu/blog/effective-react-que...