Using queryClient inside queryFunction

[CaioDev19]

Hello everyone,

I have a few queries related to updating state in Redux, especially concerning animations and a shopping cart in my application. Primarily, I update the state using WebSockets, but when the query is refetched, I also need to update this state to enable animations. To perform this update, I require access to both the old data and the new data. While I can obtain the old data when updating with WebSockets using setQueriesData, I face a challenge when the query is refetched, as I don't have access to the old data.

The solution I've come up with is to retrieve the query data from within the queryFunction. However, I'm wondering if this approach follows best practices. since i'm using the queryClient inside the queryFunction. Here's an example of the code:

export async function getMatchesByTournament({
  pageParam = 1,
  queryKey,
}: QueryFunctionContext<
  [MatchesQueryKeys.Primary, MatchesQueryKeys, MatchesGetAllBySportRequestDto]
>) {
  const data =
    queryClient.getQueriesData<InfiniteData<MatchesGetAllBySportResponseDto>>(
      queryKey,
    );
  const previousData = data?.[data?.length - 1]?.[1];

  const { slug, limit } = queryKey[2];

  const response: AxiosResponse<MatchesGetAllBySportResponseDto> =
    await baseAPI.get<MatchesGetAllBySportResponseDto>(
      '/matches/by-tournament',
      {
        params: {
          page: pageParam,
          limit,
          slug,
        },
      },
    );

  if (previousData) {
    response?.data?.data?.forEach((match) => {
      SportsService.updateMatchesState(previousData, match);
    });
  }

  return response.data;
}

[TkDodo]

using the QueryClient inside the queryFn should be fine.