I have a Next.js project that is utilizing Apollo GraphQL to retrieve data from the backend. My goal is to render the page using server-side rendering. However, I am encountering an obstacle as the React hooks provided by GraphQL Apollo prevent me from calling the backend within the getServerSideProps function.
How can I overcome this challenge?
import * as React from "react";
import { useExampleQuery } from "graphql/types";
export const getServerSideProps = async ({ params }) => {
// Here we should probably call graphql function that is now called inside Page
return { props: { hash: params.hash } };
};
const Page = ({ hash }) => {
/*
I am currently calling my graphql query here using apollo react hooks,
that are generated inside graphql/types using @graphql-codegen (typescript)
*/
const { data, loading } = useExampleQuery({
variables: {
hash: hash,
},
});
return loading ? <p>{loading}</p> : <p>{data.example.text}</p>;
};
export default Page;