T
TanStack•10mo ago
other-emerald

queryClient and useQuery data is not the same(same query key)?

Hello, I recently started experiencing issues when trying to update my query data using setQueryData and noticed that it wasn't being updated correctly. Then i tried to log the same data from queryclient and usequery and it turns out that there is a mismatch. 
  const queryKeyObject = ["diaryDay", userId, selectedDayDate];
  const { data: diary, isLoading } = useGetDiaryDay(userId, selectedDayDate);

  const { data: queryData } = useQuery({
    queryKey: queryKeyObject,
  });
  const queryClientData = queryClient.getQueryData(queryKeyObject);

  const getData = () => {
    console.log({
      queryData, // correct data object
      queryClientData, // undefined
    });
  };
  const queryKeyObject = ["diaryDay", userId, selectedDayDate];
  const { data: diary, isLoading } = useGetDiaryDay(userId, selectedDayDate);

  const { data: queryData } = useQuery({
    queryKey: queryKeyObject,
  });
  const queryClientData = queryClient.getQueryData(queryKeyObject);

  const getData = () => {
    console.log({
      queryData, // correct data object
      queryClientData, // undefined
    });
  };
queryclient returns undefined data for the same queryKey. I dont think I've had this problem before, is there a potential bug in the new react query package? "@tanstack/react-query": "^5.51.11" By the way this is the way I'm initializing queryClient in my root file, am I missing some necessary options? 
  const queryClient = new QueryClient();
  const queryClient = new QueryClient();
2 Replies
typical-coral
typical-coral•10mo ago
Sounds like a wrong or unstable queryClient reference.
const queryClientData = queryClient.getQueryData(queryKeyObject);
Where is the queryClient coming from for this line? https://tanstack.com/query/latest/docs/eslint/stable-query-client https://tanstack.com/query/latest/docs/framework/react/reference/useQueryClient
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
From An unknown user
From An unknown user
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
From An unknown user
From An unknown user
typical-coral
typical-coral•10mo ago
Also the code looks a little strange. You have a useGetDiaryDay hook and then another useQuery with no queryFn?

Did you find this page helpful?