如何从`getServerSideProps`中提取查询以分离帮助文件？答案

【问题标题】：How to extract query from `getServerSideProps` to separate helper file?如何从`getServerSideProps`中提取查询以分离帮助文件？
【发布时间】：2021-09-02 11:44:50
【问题描述】：

我有几个页面要在 getServerSideProps 中调用查询来请求 currentUser。

我目前拥有的是这样的：

import { NextPageContext } from 'next';
import { withAuth } from 'hoc/withAuth';
import { addApolloState, initializeApollo } from 'lib/apolloClient';
import { MeDocument } from 'generated/types';
import nookies from 'nookies';
import Profile from 'components/Profile';

const ProfilePage: React.FC = () => <Profile />;

export const getServerSideProps = async (
  context: NextPageContext
): Promise<any> => {
  // withAuth(context);

  const client = initializeApollo();
  const { my_token } = nookies.get(context);

  await client.query({
    query: MeDocument,
    context: {
      headers: {
        authorization: my_token ? `Bearer ${my_token}` : '',
      },
    },
  });

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

export default ProfilePage;

这行得通，我可以在我的 Apollo 开发工具中验证缓存正在与用户一起更新。

当我尝试将 Apollo 初始化和查询移动到单独的文件中时，由于某种原因，缓存永远不会更新。

在withAuth.tsx 文件中，我有这样的东西：

import { NextPageContext } from 'next';
import { addApolloState, initializeApollo } from 'lib/apolloClient';
import { MeDocument } from 'generated/types';
import nookies from 'nookies';

export const withAuth = async (context: any,) => {
  const client = initializeApollo();
  const { gc_token } = nookies.get(context);

  await client.query({
    query: MeDocument,
    context: {
      headers: {
        authorization: gc_token ? `Bearer ${gc_token}` : '',
      },
    },
  });

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

有了这个，我所要做的就是在getServerSideProps 中调用withAuth()。没有错误，但是缓存没有更新。

如何正确地将该代码提取到单独的文件中？

【问题讨论】：

我想你只需要在 getServerSideProps 中 await withAuth(context); 吗？
我希望它这么简单，但这似乎也不起作用。
在getServerSideProps内部调用withAuth时需要return语句，即return withAuth(context);。
噢！我认为你是对的，我讨厌它是那么简单。谢谢@juliomalves！

标签： next.js apollo apollo-client

【解决方案1】：

感谢 cmets 中的 @juliomalves，我只是忘了返回 withAuth 函数！

现在是这样的：

pages/index.tsx

export const getServerSideProps = async (
  context: NextPageContext
): Promise<any> => await withAuth(context);

withAuth.tsx

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { getSession } from 'next-auth/client';
import redirectToLogin from 'helpers/redirectToLogin';
import { addApolloState, initializeApollo } from 'lib/apolloClient';
import { MeDocument } from 'generated/types';
import nookies from 'nookies';

export const withAuth = async (context: any) => {
  const session = await getSession(context);
  const isUser = !!session?.user;

  // no authenticated session
  if (!isUser) redirectToLogin();

  const client = initializeApollo();
  const { token } = nookies.get(context);

  await client.query({
    query: MeDocument,
    context: {
      headers: {
        authorization: token ? `Bearer ${token}` : '',
      },
    },
  });

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

【讨论】：