Documentation on using Apollo and SSG?

Technical Questions
,
1

Is there any examples of using Apollo client to do SSG content? I want to SSG my header and footer navigation content. I keep running into this error:

TypeError: (0 , _apollo_experimental_nextjs_app_support__WEBPACK_IMPORTED_MODULE_0__.registerApolloClient) is not a function

export const { getClient, query, PreloadQuery } = registerApolloClient(() => {

I’m using latest React and Next.js 14.

Thanks!

2

Hello @brdev,

The error you’re encountering suggests that there might be an issue with how you’re importing or using registerApolloClient.

Example of Setting Up Apollo Client with SSG:

Create a new file for your Apollo Client setup, for example, apolloClient.js:

// apolloClient.js
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'YOUR_GRAPHQL_API_ENDPOINT', // Replace with your GraphQL API
  cache: new InMemoryCache(),
});

export default client;

You can fetch data at build time using the getStaticProps function. Here’s an example of how to use it in a page component:

// pages/index.js
import { gql } from '@apollo/client';
import client from '../apolloClient';

const QUERY = gql`
  query GetHeaderFooter {
    header {
      title
      links {
        text
        url
      }
    }
    footer {
      text
      links {
        text
        url
      }
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({
    query: QUERY,
  });

  return {
    props: {
      header: data.header,
      footer: data.footer,
    },
  };
}

const HomePage = ({ header, footer }) => {
  return (
    <div>
      <header>
        <h1>{header.title}</h1>
        <nav>
          {header.links.map(link => (
            <a key={link.url} href={link.url}>{link.text}</a>
          ))}
        </nav>
      </header>
      {/* Page content goes here */}
      <footer>
        <p>{footer.text}</p>
        <nav>
          {footer.links.map(link => (
            <a key={link.url} href={link.url}>{link.text}</a>
          ))}
        </nav>
      </footer>
    </div>
  );
};

export default HomePage;

Let us know if the above doesn’t help!

Thanks,