Add an ESLint Rule to Prevent Hardcoded Cache Keys

[vanenshi]

When working with React Query, it's a good practice to avoid hardcoding cache keys within the useQuery hook. Hardcoded cache keys can lead to issues such as cache misses, stale data, and difficulty in maintaining and refactoring the codebase.

To address this concern, I propose adding a new ESLint rule that will enforce the use of externalized cache keys. By externalizing the cache keys, developers can easily maintain and update them across the application without the risk of breaking existing cache behavior.

Here's an example of how the rule would work:

• Bad

const query = useQuery({
  queryKey: ["user", "me"],
  queryFn: getCurrentUser
});

• Good

export const currentUserQueryKey = ["user", "me"];

const query = useQuery({
  queryKey: currentUserQueryKey,
  queryFn: getCurrentUser
});

Why?

imaging this scenario: a developer wants to invalidate the getCurrentUser query

queryClient.invalidateQueries(["user", "me"]);

and another developer update the query key to this

const query = useQuery({
  queryKey: ["users", "me"], // user => users
  queryFn: getCurrentUser
});

Now the invalidateQueries will not work anymore, since it's a hardcoded value. in a large project any change like this might be a headache and really easy to miss

---

How to fix this? We define the query like this

export const currentUserQueryKey = ["user", "me"];

const query = useQuery({
  queryKey: currentUserQueryKey,
  queryFn: getCurrentUser
});

and invalidate query like this

queryClient.invalidateQueries(currentUserQueryKey);

for more complex scenarios, like if you need the userId in your cache key, this article provided a very good solution Use Query Key factories

[TkDodo]

there is no difference between the "good" and "bad" example you're giving. Extracting something to a local const doesn't make anything better. This is not something we're going to enforce with eslint.

[vanenshi]

I had to clarify the problem. sorry, my bad

imaging this scenario: a developer wants to invalidate the getCurrentUser query

queryClient.invalidateQueries(["user", "me"]);

and another developer update the query key to this

const query = useQuery({
  queryKey: ["users", "me"], // user => users
  queryFn: getCurrentUser
});

Now the invalidateQueries will not work anymore, since it's a hardcoded value

---

How to fix this? We define the query like this

export const currentUserQueryKey = ["user", "me"];

const query = useQuery({
  queryKey: currentUserQueryKey,
  queryFn: getCurrentUser
});

and invalidate query like this

queryClient.invalidateQueries(currentUserQueryKey);

for more complex scenarios, like if you need the userId in your cache key, this article provided a very good solution Use Query Key factories

const userKeys = {
  all: ['users'] as const,
  me: () => [...todoKeys.all, 'me'] as const,
  detail: (id: number) => [...todoKeys.all(), id] as const,
}

const query = useQuery({
  queryKey: userKeys.me(),
  queryFn: getCurrentUser
});

queryClient.invalidateQueries(userKeys.me());

[TkDodo]

sure, but just because you export a constant called currentUserQueryKey also doesn't guarantee that it will be used everywhere. Nothing is stopping you from calling queryClient.invalidateQueries(['foo', 'bar']) and then have you wondering why the users aren't invalidated after that call. This is nothing a lint rule can solve. Libraries built on top of react-query, like trpc or zodios on the other hand, can solve and have solved this problem.

[vanenshi]

I understand your point now
Thanks @TkDodo