Add useFetchPolicyAfterHydration hook

[mariusc23]

Change the fetch policy from cache-first to cache-and-network on mount to fix apollographql/apollo-client#8669

import { WatchQueryFetchPolicy } from "@apollo/client";
import { useHydrated } from "./useHydrated";

export type UseFetchPoliciesAfterHydrationParams = {
  afterHydrationFetchPolicy?: WatchQueryFetchPolicy;
  afterHydrationNextFetchPolicy?: WatchQueryFetchPolicy;

  beforeHydrationFetchPolicy?: WatchQueryFetchPolicy;
  beforeHydrationNextFetchPolicy?: WatchQueryFetchPolicy;
};

/**
 * useFetchPoliciesAfterHydration
 *
 * To get around an issue with SSR/Apollo showing the incorrect loading status
 * we're going to load the initial request with cache-first and then
 * swap out the fetchPolicy so that the loading indicator is not incorrectly shown
 * while reading from the apollo cache
 * https://github.com/apollographql/apollo-client/issues/8669
 *
 *
 */
export function useFetchPoliciesAfterHydration({
  afterHydrationFetchPolicy = "cache-and-network",
  afterHydrationNextFetchPolicy,

  beforeHydrationFetchPolicy = "cache-first",
  beforeHydrationNextFetchPolicy = "cache-first",
}: UseFetchPoliciesAfterHydrationParams = {}) {
  const isHydrated = useHydrated();

  return isHydrated
    ? {
        fetchPolicy: afterHydrationFetchPolicy,
        nextFetchPolicy: afterHydrationNextFetchPolicy ?? beforeHydrationNextFetchPolicy,
      }
    : { fetchPolicy: beforeHydrationFetchPolicy, nextFetchPolicy: beforeHydrationNextFetchPolicy };
}