Hydration breaks for queries with fetched keys

[rpedroni]

I have a page that we statically generate (SSG) with Next.js where we fetch a staticProps object (with org and grants inside) beforehand on the server-side.

export const getStaticProps: GetStaticProps<OrgStaticProps> = async ({ params }) => {
  const { ein } = params as DeployedOrgStaticPathParams;

  try {
    const { data: org } = await api.GetOrgByEin.execute(getNormalizedEIN(ein));
    const { data: grants } = await api.GetOrgGrants.execute(org.id);

    const res: GetStaticPropsResult<OrgStaticProps> = {
      props: {
        staticProps: {
          org,
          grants,
        },
      },
      revalidate: 120,
    };

    return res;
  } catch {
    return {
      props: {},
    };
  }
};

The page component that consumes this follows:

// `ein`  is a url param, used to define the static paths

  const orgResult = useQuery([api.GetOrgByEin.key, ein], () => api.GetOrgByEin.execute(ein), {
    initialData: staticProps?.org && { data: staticProps.org },
  });

  const org = orgResult.data?.data;

  const orgGrantsResult = useQuery([api.GetOrgGrants.key, org?.id], () => api.GetOrgGrants.execute(org!.id), {
    enabled: !!org?.id,
    initialData: staticProps?.grants && { data: staticProps.grants },
  });

Using this component, sometimes we will have a rendering problem when hydrating, breaking the UI significantly because react can't properly hook everything up. After many hours debugging this, the root cause I found is actually the cache key for the orgGrantsResult query, more specifically the org?.id part of the key. I don't understand why this happens since the server will always have the org (and consequentially org.id) because this is SSG fetched but looking into the orgGrantsResult when the error happens, the query status is loading instead of success, even though the staticProps.grants object for sure is there.

My question is if this is a race condition between react and react-query or me misunderstanding how the hydration process works? I fixed this by not using org?.id but ein as part of the key but this is not optimal since when new grants are created, we only have access to the org.id and invalidate based on that value.

Any help greatly appreciated 🙏

[TkDodo]

I cant say I fully understand the problem. A codesandbox reproduction would likely help here.