Everything works as expected locally, but when deployed, i think useEffect runs before the cache can be restored?

use client";

import { Build, Recipe } from "@/__generated__/graphql";
import { useEffect, useMemo } from "react";
import { useQuery, useReactiveVar } from "@apollo/client";

import { USER_BUILDS } from "@/app/graphql/queries/recipe";
import { useSession } from "next-auth/react";
import { userRecipeList } from "@/app/graphql/reactiveVar/recipes";

export default function RecipeLoader() {
  const { status: sessionStatus } = useSession();
  const { data, loading, error } = useQuery(USER_BUILDS, {
    skip: sessionStatus !== "authenticated",
    fetchPolicy: "cache-and-network"
  });
  const recipeList = useReactiveVar(userRecipeList);

  useEffect(() => {
    if (data) {
      const recipes = convertRecipes(data);
      recipes.sort((a, b) => a.name.localeCompare(b.name));
      userRecipeList(recipes);
    }
  }, [data]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>{error.message}</div>;
  }

  return <div>{`${recipeList.length} Recipes Loaded`}</div>;
}

I'm using localForage and apollo-cache-persist for cache persist. Anyone have any advice?