SSR 在 Next.js 中因使用 Apollo 客户端不成功的 GraphQL 请求（HTTP 代码 500）而崩溃

Question

嗯，我有点矮。我会尽量清楚地解释我的问题。

我使用 Apollo 客户端进行 GraphQL 查询。我也使用 NextJS。 由于 SEO 原因，我有一个页面需要在服务器端呈现。

所以我有一个getProductFromSlug 函数可以让我执行我的请求。

export const getProductFromSlug = async (slug: string) => {
  try {
    const { data, error } = await apolloClient.query<{
      product: Product
    }>({
      query: GET_PRODUCT_BY_SLUG_QUERY,
      variables: {
        slug,
      },
    })

    if (error) {
      return { errors: [error.message] }
    }

    if (!('product' in data) || data.product === null) {
      return { errors: ['Product with specified url not found'] }
    }

    return {
      data,
    }
  } catch (error) {
    // @ts-ignore
    const formattedErrors: ApolloError = isApolloError(error)
      ? error.graphQLErrors.map((error) => error.message)
      : [`Unhandled error : ${error}`]

    return {
      errors: formattedErrors,
    }
  }
}

这里是getServerSideProps 将数据传递到页面

export const getServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const requestData = await getProductFromSlug(context.params.slug as string)
  return 'errors' in requestData
    ? { notFound: true, props: requestData }
    : { props: requestData }
}

问题是，当我从端点收到 HTTP 代码 500 时，SSR 正在崩溃，而在 Vercel 上，它会导致无服务器崩溃错误。

错误：响应不成功：收到状态码 500 生成页面时发生此错误。任何控制台日志都将显示在终端窗口中

如果需要，这是我的入口点 (_app.tsx)：

function MyApp(props: AppProps) {
  return (
    <ApolloProvider client={apolloClient}>
      <RecoilRoot>
        <RecoilNexus />
        <AuthenticationFromStorage />
        <Layout>
          <props.Component {...props.pageProps} />
        </Layout>
      </RecoilRoot>
    </ApolloProvider>
  )
}

您可以在这里查看我的 Apollo 客户端：https://gist.github.com/SirMishaa/d67e7229307b77b43a0b594d0c9e6943

yarn run dev 的堆栈跟踪（下一个 dev -p 3005）：

ServerError: Response not successful: Received status code 500
    at Object.throwServerError (C:\Users\misha\Documents\dev\rekk-next\node_modules\@apollo\client\link\utils\utils.cjs:45:17)
    at C:\Users\misha\Documents\dev\rekk-next\node_modules\@apollo\client\link\http\http.cjs:31:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
error - uncaughtException: ServerError: Response not successful: Received status code 500
error Command failed with exit code 1.

注意： 在 try and catch 范围内对 console.log 进行了一些尝试后，在 Next SSR 控制台中没有显示任何内容，因此由于某种原因没有捕获 Apollo 的内部错误。

感谢您的帮助，谢谢！

Answer 1

更新

问题是PusherLink 在出现错误时没有继续执行链。添加error 和complete 处理程序解决了这个问题。

      forward(operation).subscribe({
        next: (data) => {
          ...
          this.subscribeToChannel(subscriptionChannel, observer)
        },
        // these two were missing
        error: (error) => observer.error(error),
        complete: () => observer.complete(),
      })

JIC，我还添加了一个缺失条件，来自 other link 的代码作为参考具有

    subscribeObservable.subscribe = (observerOrNext, onError, onComplete) => {
      if (typeof(observerOrNext) == "function") {
        prevSubscribe(observerOrNext, onError, onComplete)
      } else {
        prevSubscribe(observerOrNext)
      }

老答案

您在 catch 块中的代码可能会引发错误，而这正是问题所在。我不确定这种情况Array.isArray(apolloError)，也许你的意思是Array.isArray(apolloError.graphQLErrors)

您可以尝试使用isApolloError 实用程序，使其更清晰一些，并从 TS 类型中获得一些提示。

import { isApolloError } from '@apollo/client';
...
        const formattedErrors = isApolloError(e)
          ? e.graphQLErrors.map(error => error.message)
          : [`Unhandled error : ${e}`];

        return {
          errors: formattedErrors,
        };

Answer 2

如果未找到 slug，您将返回空的 data。您需要检查是否找不到数据。

如果未找到数据，查询仍会以有效状态码响应，因为它仍然是有效查询，并且 Apollo 也在进行错误检查。

---

注释示例

export const getProductFromSlug = async (slug) => {
  try {
    // destructure `errors`
    const { data, errors } = await apolloClient.query({
      query: QUERY, variables: { slug },
    });

    // if apolloError/endpoint error i.e. 404/500/validation etc
    if(errors) {
     // Return notFound or formatted Apollo/validation errors
     return { notFound: true } 
    }

    // didn't find data for a slug and there aren't Apollo errors
    if(!data){ return { notFound: true } }

    // found slug and there aren't any errors
    return { data }

  } catch (e) {
    // hard JS errors not apollo or endpoint errors
    return { notFound: true }
  }
}

---

未注释的示例

export const getProductFromSlug = async (slug) => {
  try {
    const { data, errors } = await apolloClient.query({
      query: QUERY, variables: { slug },
    });
    return { data, notFound: (errors || !data) };
  } catch (e) {
    return { notFound: true };
  }
}

不考虑输入验证错误，但您的用例似乎不接受用户输入

---

您已经在抽象代码中处理错误和数据格式，按原样返回数据

export const getServerSideProps = async (context) => {
  if(!context.params) { return { notFound: true }}
  return await getProductFromSlug(context.params.slug);
}