如果你有 apollo react 钩子从后端获取数据，你如何使用 nextjs 进行服务器端渲染？

Question

我有一个 nextjs 项目，它使用 apollo graphql 从后端获取数据。我正在尝试使用服务器端渲染来渲染我的页面。但我目前正在使用 graphql apollo react hooks 从后端获取我的数据，react hooks 阻止我在 getServerSideProps 中调用我的后端。

我该如何解决这个问题？

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;

Answer 1

getServerSideProps 是一个服务器端函数，所以你不能完全调用它里面的 apollo 查询钩子。

一种方法是使用apollo客户端实例查询方法。

请参阅下面的示例代码。

import { gql } from '@apollo/client';
import apolloClient from '/path/to/graphql/server/client';

// Example Query
const EXAMPLE_QUERY = gql`
  query EXAMPLE_QUERY($hash: String!) {
    exampleQuery(hash: $hash) {
      ...
    }
  }
`;

export const getServerSideProps = async ({ params }) => {
  const { data } = await apolloClient.query({
    query: EXAMPLE_QUERY,
    variables: { hash: params.hash },
  });

  return {
    props: {
      hash: params.hash,
      data,
    },
  };
};

另外，如果导入你的 apollo 客户端服务器实例有点不清楚，你可以使用这个 graphql-request 包在给定 URL 的情况下发出 graphql 请求。

查看示例

import { GraphQLClient } from "graphql-request";

// Replace GRAPHQL_URL below to actual
const client =  new GraphQLClient(<GRAPHQL_URL>);

export const getServerSideProps = async ({ params }) => {

  const { data } = await client.request(EXAMPLE_QUERY, {
      hash: params.hash 
  });

  return {
    props: {
      hash: params.hash,
      data,
    },
  };
};