How to get client from wrapper in next.js getServerSideProps()?

Viewed 693

I'm trying to use next.js with apollo graphql for server-side rendering. I know that to do that i need to run the necessary queries inside getServerSideProps(), which then will pass the props into the main component, where i will be able to render the results.

I created a provider to make sure all components in the tree get the same client object.

import withApollo from "next-with-apollo";
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { ApolloProvider } from "@apollo/react-hooks";

export default withApollo(
  () => {
    return new ApolloClient({
      ssrMode: true,
      uri: "https://my.api/graphql",

      cache: new InMemoryCache()
    });
  },
  {
    render: ({ Page, props }) => {
      return (
        <ApolloProvider client={props.apollo}>
          <Page {...props} />
        </ApolloProvider>
      );
    }
  }
);

but how can i get this client inside the getServerSideProps() function if it's not being wrapped by withApollo()?

import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import { ApolloClient } from "@apollo/client";
import withApollo from "next-with-apollo";

const MY_QUERY = gql`
  query MyQuery {
    myQuery {
      name
    }
  }
`;

function MyComponent(props) {
  return (
    <div className="landing-section__topcontainer ph-lg-8 ph-3">
      <div className="overflow-list-container">
        <div className="landing-horizontal-list">
          {props.res.map(q => {
            return (
               <div className="tag-tile__title">{q.name}</div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  // Fetch data from external API

  const apolloClient = getApolloClient();

  const { data } = await apolloClient.query({
    query: MY_QUERY
  });
  const res = data.myQuery;

  return { props: { res } };
}

export default withApollo(MyComponent);
0 Answers
Related