Query hook URL undefined in production

[jinsley8]

I setup a custom query hook with Next.js SSR and having an issue where in production there is undefined added to the query URL after the domain.

const getSettingsById = async (settingId) => {
  const { data } = await axios.get(`${server}/api/v1/sitesettings/${settingId || ''}`);
  return data;
};

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

This is how the query hook is being used on pages:

export async function getServerSideProps(context) {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery(['siteSettings', null], () => getSettingsById());

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

That URL is http://localhost:3000/api/v1/sitesettings in dev but in production it is https://domain.com/undefined/api/v1/sitesettings.

I can't figure out if I'm missing something that's causing this to occur.

[jinsley8]

The URL undefined was because I didn't prepend the PROD_URL env variable with NEXT_PUBLIC_

But I also had to change the route to find by Id then in components use the Id in the custom hook so the hook works properly now:

const Branding = (props) => {
  const { data } = useSiteSettings(1);

  return (
    <div className={`${styles.branding_container} ${props.noGutter ? styles.no_gutter : ''}`}>
      <img className={styles.vcc_logo} src={data.siteLogo} />
    </div>
  );
};

In pages, the Id had to be used too:

export async function getServerSideProps() {
  // Fetch site settings
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(['siteSettings', 1], () => getSettingsById(1));
}