react-query + useSnapshot & "Beter to use proxy state" eslint warning

[peterpme]

Hello, long time fan of Valtio! I just have some clarifying questions.

Given the below react-query example, where queryKey should be treated like useEffect: anything inside queryFn should be included in the dependency array:

export function useUserFriends() {
  const { userId } = useSnapshot(store);

  return useSuspenseQuery({
    queryKey: [userId, "friends"],
    queryFn: async () => {
      const friends = await fetch(/* ... */);
      return processData(userId, friends); // better to use proxy state
    },
  });
}

I'm seeing a "Better to use proxy state" eslint warning for processData(userId)

Now my gut tells me that this is setup correctly, because of the way we should treat queryKey/queryFn like useEffect. That being said, maybe I'm doing something wrong?

Thanks!

[dai-shi]

Yeah, with react-query, I think your code is correct, because of queryKey.
However, eslint-plugin-valtio doesn't know its semantics.

For this specific case, my suggestion is to avoid inlining query key in query function.

export function useUserFriends() {
  const { userId } = useSnapshot(store);

  return useSuspenseQuery({
    queryKey: [userId, "friends"],
    queryFn: async ({ queryKey }) => {
      const [userId] = queryKey;
      const friends = await fetch(/* ... */);
      return processData(userId, friends);
    },
  });
}

[peterpme]

Thank you!