Apollo client for GraphQL

Setup client to make requests to GraphQL API in Next.js SSR and SSG stages.

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

//Define a client
const client = new ApolloClient({
uri: process.env.REACT_APP_GRAPH_API,
cache: new InMemoryCache()
});

//use client to query all items' slugs (get all entitis available) to a variable
export async function getStaticPaths() {
const { data: {snippets} } = await client.query(
{query: gql`{snippets { slug } }`}
);

//use variable's slugs to create an object with "params" before passing it to a getStaticProps
const paths = snippets.map(item => ({params: {slug: item.slug}}));
return { paths, fallback: false }
}

  1. Get all items 1 unique prop. It will be used to generate content later. For each item in the result array, getStaticProps will create query content.
  2. Reformat variable to create an object with "params", this is how Next need it to be passed to the next function
  3. Run getStaticProps through that object and build content for each item in the array.

This allows pre-render an unspecified number of pages, like blog items.