0

im using nextjs 14.2.3 (page router) with react query, and my data is not cached when im trying to call an api on the server with getServerSideProps with reactQuery. when ever i change my route, the same request with the same queryKey is fetching again and again. i got it from ReactQueryDevtools, the 'last update' in ReactQueryDevtools updates per navigating between my routes. Also i used gcTime and staleTime of 5 minutes,all my api queries are fresh but it send request again adn again, and i didnt use any refetch in my project to cause this behaviour. i want to cache my data when the first getServerSide props called, i dont want to send any requests when my queries are fresh.

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { provider_name } = context.params as Params;
  const queryClient = new QueryClient();

  const providerInfo = await queryClient.fetchQuery({
    queryKey: providerInfoQueryKey(provider_name),
    queryFn: () => apiGetProviderInfo(provider_name),
  });

  const providerId = providerInfo.data.id;

  await Promise.all([
    queryClient.prefetchQuery({
      queryKey: providerNoteQueryKey({ providerId }), // return ["get-provider-note",providerId]
      queryFn: () => apiGetProviderNotes(providerId),
    }),
    queryClient.prefetchQuery({
      queryKey: hotProductsQueryKey({ providerId }),
      queryFn: () => apiGetHotProducts(providerId),
    }),
    queryClient.prefetchQuery({
      queryKey: providerWorkingHoursQueryKey({ providerId }),
      queryFn: () => apiGetWorkingHours(providerId),
    }),
    queryClient.prefetchQuery({
      queryKey: menuSettingsQueryKey({ providerId }),
      queryFn: () => apiGetMenuSettings(providerId),
    }),
    queryClient.prefetchQuery({
      queryKey: providerThemeQueryKey(providerId),
      queryFn: () => apiGetProviderTheme(providerId),
    }),
    queryClient.prefetchQuery({
      queryKey: menuListQueryKey({ providerId }),
      queryFn: () => apiGetMenuList(providerId),
    }),
  ]);

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
};

imagine all these 7 fetches are fetching per pages. caching is not working to prevent unnecessary requests.

0