1 reply

Next.js & ApolloClient Best practices

Hi folks, I'm starting to learn Next with GraphQL and Apollo and I've got some questions. In the Next Github's examples I found this template https://github.com/vercel/next.js/tree/canary/examples/with-apollo with a specific configuration of Apollo Client. Should it look like this? Here's a link to my repo, where I've copied and adjusted the config:
https://github.com/Lyczeq/graphql-swapi/blob/main/src/lib/graphql/apolloClient.ts

The next thing is usage of

getServerSideProps

getServerSideProps

with ApolloClient. As I understand, Apollo caches the data from requests, so is it a good practice to do things like below?

export const getServerSideProps = async () => {
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: FilmsDocument,
  });

  await apolloClient.query({
    query: PlanetsDocument,
  });

  return addApolloState(apolloClient, {
    props: {},
  });
};

export const getServerSideProps = async () => {
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: FilmsDocument,
  });

  await apolloClient.query({
    query: PlanetsDocument,
  });

  return addApolloState(apolloClient, {
    props: {},
  });
};

I mean here is the repeated execution of

await apolloClient.query

await apolloClient.query

. Imo the execution of this request here results in the fact that lower in the components of a given page, you can simply take this data from the cache.

Thanks in advance for your answers. I would also like to ask you for suggestions and best practices using Next.js and Apollo. happy

TTC

Theo's Typesafe Cult•3y ago•

1 reply

lyczek

Next.js & ApolloClient Best practices

getServerSideProps

getServerSideProps

with ApolloClient. As I understand, Apollo caches the data from requests, so is it a good practice to do things like below?

export const getServerSideProps = async () => {
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: FilmsDocument,
  });

  await apolloClient.query({
    query: PlanetsDocument,
  });

  return addApolloState(apolloClient, {
    props: {},
  });
};

export const getServerSideProps = async () => {
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: FilmsDocument,
  });

  await apolloClient.query({
    query: PlanetsDocument,
  });

  return addApolloState(apolloClient, {
    props: {},
  });
};

I mean here is the repeated execution of

await apolloClient.query

await apolloClient.query

Next.js & ApolloClient Best practices

Similar Threads

Next.js & ApolloClient Best practices

Similar Threads

Similar Threads

Similar Threads