Discussion on: Setting up Apollo GraphQL in Next.js with Server Side Rendering.

[Michael Porter]

I was able to extend this out a bit with getStaticProps and getStaticPaths:

export async function getStaticPaths(ctx) {
  const client = await apolloClient(ctx)
  const response = await client.query({
    query: ALL_CHARACTER_IDS
  })

  const { count } = response.data.characters.info;

  const ids = [...Array(count).keys()];

  const paths = ids.map(id => ({
    params: { id: `${id + 1}` },
  }))

  return { paths, fallback: true }
}

export async function getStaticProps({ params }, ctx) {
  const client = await apolloClient(ctx)
  const response = await client.query({
    query: GET_CHARACTER,
    variables: {id: `${params.id}`}
  })

  const { character } = response.data;

  return { props: {
    character,
    loading: response.loading,
    error: !response.error ? null : response.error
    }
  }

Build time takes a bit but otherwise nice.

[Thomas Maximini]

Thanks, that was useful!