Apollo client doesn't work correctly when using getStaticPaths?

[Dannymx]

I'll try to explain what I'm trying to do as simple as possible because I really don't know what's going on here:

So I'm creating a simple pages/[[...index]].js page where the first parameter is optional and dynamic. I want this page to be SSG so the navigation is static, but the content is not, and also the content needs an authenticated user to be seen. For this I'm using the with-iron-session which works fine, I can login a user.

I'm using Strapi which needs a Authorization: 'Bearer <token> header to accept the request, so for this I'm appending a context to my useQuery like so:

const Home = () => {
  const router = useRouter();

  const { user } = useUser({
    redirectTo: "/login",
  });

const { data, loading, error } = useQuery(GET_BEERS, {
    ssr: false,
    variables: getVariables(router.query.index),
    context: {
      headers: {
        Authorization: user?.jwt ? `Bearer ${user.jwt}` : "", <---- HERE
      },
    },
  });
....

The problem arises when the Apollo Client is created, following the with-apollo example you can see it clearly re-uses the Apollo Client created in the server and passes it to the client. So here's where I initialize the apollo client and the getStaticPaths. As you can see I only SSG the / path.

export const getStaticProps = async (ctx) => {
  const apolloClient = initializeApollo();

  // Only Pre-fetch my navbar categories to make them SSG
  await Promise.all([apolloClient.query({ query: GET_CATEGORIES })]);

  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),
    },
    revalidate: 1,
  };
};

export const getStaticPaths = async () => {
  return {
    paths: ["/"],
    fallback: true,
  };
};

If a path is SSG when I load the page I get a forbidden error from Apollo, but when I load a page path that wasn't SSG, it works just fine and my content is loaded fine.

My paths are simple:

• /
• /ale
• /lager

So in summary: I've noticed that when I SSG a path, the Apollo Client doesn't work exactly the same vs a path that was not included in the paths array. Or maybe it's because on a SSG path my useUser is ignored and Apollo assumes no user is logged in?

Here are visuals of the / path not working correctly vs /ale path:

And the last one, where if I click in one of the Links and I come back to the / path it just magically works, but only if it's coming from another page.

At this point I'm thinking about giving up if I can't figure out this and just use something else, maybe SSR which I really don't want to because I don't think it's necessary.

Full code below:

import { ApolloProvider } from "@apollo/client";
import { useApollo } from "../lib/apolloClient";
import "../css/tailwind.css";

const App = ({ Component, pageProps }) => {
  const apolloClient = useApollo(pageProps.initialApolloState);

  return (
    <ApolloProvider client={apolloClient}>
      <Component {...pageProps}></Component>
    </ApolloProvider>
  );
};

export default App;

import React from "react";
import { useRouter } from "next/router";
import { initializeApollo } from "../lib/apolloClient";
import { GET_CATEGORIES } from "../components/Navbar";
import MainLayout from "../components/Layout";
import ImageCard from "../components/ImageCard";
import useUser from "../lib/useUser";
import { useQuery, gql } from "@apollo/client";

const Home = () => {
  const router = useRouter();

  const { user } = useUser({
    redirectTo: "/login",
  });

  const { data, loading, error } = useQuery(GET_BEERS, {
    ssr: false,
    variables: getVariables(router.query.index),
    context: {
      headers: {
        Authorization: user?.jwt ? `Bearer ${user.jwt}` : "",
      },
    },
  });

  return (
    <MainLayout>
      <div className="grid lg:grid-cols-4 grid-cols-2 gap-4">
        {renderList(data, loading, error)}
      </div>
    </MainLayout>
  );
};

// Render a list of beers or loading/error otherwise
const renderList = (data, loading, error) => {
  if (loading) return <h1>Loading...</h1>;

  if (data) {
    return data.beers.map((beer, index) => (
      <ImageCard key={index} beer={beer}></ImageCard>
    ));
  }

  if (error) {
    return error.graphQLErrors.map(({ message }, i) => (
      <span key={i}>{message}</span>
    ));
  }
};

const GET_BEERS = gql`
  query getBeers($where: JSON) {
    beers(where: $where) {
      id
      name
      created_at
      image {
        url
      }
      category {
        name
        slug
      }
    }
  }
`;

export const getStaticProps = async (ctx) => {
  const apolloClient = initializeApollo();

  // Only Pre-fetch my navbar categories to make them SSG
  await Promise.all([apolloClient.query({ query: GET_CATEGORIES })]);

  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),
    },
    revalidate: 1,
  };
};

export const getStaticPaths = async () => {
  return {
    paths: ["/"],
    fallback: true,
  };
};

const getVariables = (index) => {
  return index !== undefined && index.length
    ? {
        where: {
          category: {
            slug: index[0],
          },
        },
      }
    : {};
};

export default Home;

import { useMemo } from "react";
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";

let apolloClient;

const createApolloClient = () => {
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: new HttpLink({
      uri: process.env.API_BASEURL
        ? `${process.env.API_BASEURL}/graphql`
        : "http://localhost:1337/graphql",
    }),
    cache: new InMemoryCache(),
  });
};

export const initializeApollo = (initialState = null) => {
  const _apolloClient = apolloClient ?? createApolloClient();

  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
  // gets hydrated here
  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract();
    // Restore the cache using the data passed from getStaticProps/getServerSideProps
    // combined with the existing cached data
    _apolloClient.cache.restore({ ...existingCache, ...initialState });
  }

  // For SSG and SSR always create a new Apollo Client
  if (typeof window === "undefined") return _apolloClient;
  // Create Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient;

  return apolloClient;
};

export const useApollo = (initialState) => {
  const store = useMemo(() => initializeApollo(initialState), [initialState]);

  return store;
};

[Dannymx]

Upon more testing I found that I needed to wait for my useUser() function result to be returned, so I had to also use useLazyQuery to execute my query later when user is fully loaded.

const [getBeers, { loading, data, error }] = useLazyQuery(GET_BEERS, {
    variables: getVariables(router.query.index),
    context: {
      headers: {
        Authorization: user?.jwt ? `Bearer ${user.jwt}` : "",
      },
    },
  });

  useEffect(() => {
    if (user) {
      getBeers();
    }
  }, [user]);