Best practice for SSR/SSG when making multiple API calls using Apollo and NextJS

[alex-r89]

Hi,

I am currently building a fairly simple web application using Nextjs and Apollo. I have been basing this on the with-apollo example, however have a few questions about how this should be further implemented.

I noticed in the with-apollo example on the index.js page, getStaticProps is used to get the data for the ALL_POSTS_QUERY.
My question here is: how would this be set up if we wanted to make multiple requests, possibly to the same endpoint with different variables. If we wanted to make more API calls here, is it correct to just add them in, like so:

export async function getStaticProps() {
  const apolloClient = initializeApollo()

  await apolloClient.query({
    query: ALL_POSTS_QUERY,
    variables: allPostsQueryVars,
  })
  await apolloClient.query({
    query: ALL_POSTS_QUERY,
    variables: getFeaturedPostsQueryVars,
  })
  await apolloClient.query({
    query: ALL_IMAGES_QUERY,
    variables: allImagesQueryVars
  })

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

Secondly, I have noticed that the above method does not work when using cookie authentication. I have a query (getUserQuery) which checks if the user is logged in and then renders certain links in a header component accordingly (I use express session on the backend + cookie auth).
My question here is if it is possible to use SSR or SSG for this? My thought is no, we need to CSR because how else can we verify the session. I just wanted to clarify this though because my current CSR implementation means the header is always in the "loggout out" state on initial render, and then repopulates to the "logged in" state when it calls and gets a user in the getUserQuery, which looks a bit jarring.

Many thanks in advance for any tips or pointers