staleTime and Next.js SSR

[jinsley8]

I'm trying to figure out the staleTIme option. I have a query for site settings that I don't want to be fetched again for awhile or unless the settings change.

I have a useSiteSettings Hook, should I set staleTime like this?

import { useQuery } from 'react-query';
import { client } from '@/utils/api-client';

const getSettingsById = async (settingId) => {
  try {
    const { data } = await client.get(`/sitesettings/${settingId || ''}`);
    return data;
  } catch (err) {
    return { error: err }
  }
};

const useSiteSettings = (settingId) => {
  return useQuery(['siteSettings', settingId], () => getSettingsById(settingId), {
    staleTime: Infinity
  });
};

export { getSettingsById, useSiteSettings };

I'm using getServerSideProps for this one each page like this below:

export async function getServerSideProps() {

  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(['siteSettings', 1], () => getSettingsById(1));

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

Also, could I add this query to _app.js so I don't have to do it on every page?