Local SSL

[carlBgood]

Maybe I'm massively confused here (most certainly), but I don't know what I'm missing here.

I have a local setup on https localhost using an express server. It works - because the route loads over https.

However, within the route, I make an api call to another route, and that fails with this error:

FetchError: request to https://localhost:3000/session failed, reason: unable to verify the first certificate

I'm confused because the certificate is valid (fresh with mkcert, CA in Windows Store, installed in Firefox Store) - and is working fine for the browser request - but when trying to access a route via api, it's being rejected.

Pretty simple request func:

export const apiFetch = async (path: string) => {
  const response = await fetch(
    `https://localhost:3000/${path}`,
    { credentials: 'include' },
  );
  const res = await response.json();
  return res;
};

The caveat I'm unaware of is I'm using Tanstack Query as well with hydration. This is the loader function being use in an index:

export async function loader() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(['session'], () => apiFetch('session'));
  return json({ dehydratedState: dehydrate(queryClient) });
}

And the resulting Tanstack call in the component:

const { data } = useQuery({ queryKey: ['session'], queryFn: () => apiFetch('session') });

On every subsequent call - it works fine. It's only the first request that gets the SSL error. And I'm assuming it's coming from there somewhere. When I invalidate that query - and it refetches - it works fine and I get this response:

GET /session 200

What am I missing??