使用带有 NextJS getStaticPaths 和 getStaticProps (SSG) 的 apollo-client - 构建错误 - ECONNREFUSED答案

【问题标题】：Using apollo-client with NextJS getStaticPaths and getStaticProps (SSG) - error on build - ECONNREFUSED使用带有 NextJS getStaticPaths 和 getStaticProps (SSG) 的 apollo-client - 构建错误 - ECONNREFUSED
【发布时间】：2020-09-28 00:52:32
【问题描述】：

我已经设置了一个动态路由静态生成的页面组件（希望是对的？），它在开发模式下完美运行。我可以在我的无头 CMS (KeystoneJS) 中创建页面，并且可以在我的本地开发人员上创建和查看这些页面。

但是，当我运行 npm run build（用于 CI）时，我收到一个奇怪的错误，如下所示：

type: 'ApolloError',
  graphQLErrors: [],
  networkError: {
    message: 'request to http://localhost:3000/admin/api failed, reason: connect ECONNREFUSED 127.0.0.1:3000',
    type: 'system',
    errno: 'ECONNREFUSED',
    code: 'ECONNREFUSED'
  }

还有一堆这样的：

events.js:287
      throw er; // Unhandled 'error' event
      ^

Error: write EPIPE
    at process.target._send (internal/child_process.js:806:20)
    at process.target.send (internal/child_process.js:677:19)
    at callback (/Users/ibrahim/projects/guppy-tron/node_modules/worker-farm/lib/child/index.js:32:17)
    at module.exports (/Users/ibrahim/projects/guppy-tron/node_modules/terser-webpack-plugin/dist/worker.js:13:5)
    at handle (/Users/ibrahim/projects/guppy-tron/node_modules/worker-farm/lib/child/index.js:44:8)
    at process.<anonymous> (/Users/ibrahim/projects/guppy-tron/node_modules/worker-farm/lib/child/index.js:55:3)
    at process.emit (events.js:310:20)
    at emit (internal/child_process.js:876:12)
    at processTicksAndRejections (internal/process/task_queues.js:85:21)
Emitted 'error' event on process instance at:
    at internal/child_process.js:810:39
    at processTicksAndRejections (internal/process/task_queues.js:79:11) {
  errno: 'EPIPE',
  code: 'EPIPE',
  syscall: 'write'
}

这是我的页面组件的样子：

import React from 'react';
import { GetStaticPaths, GetStaticProps } from 'next';
import {
  GET_ALL_STATIC_PAGES,
  GET_STATIC_PAGES_BY_URL,
  IStaticPage,
} from '../../graphql/static-page-queries';
import client from '../../graphqlClient';
import BlocksContent from '../components/BlocksContent';

interface IPageProps {
  pageData: IStaticPage;
}

const Page = ({ pageData }: IPageProps) => {
  return (
    <div className="mh2 mh3-ns">
      <h1 className="f1">{pageData.title}</h1>
      <BlocksContent content={pageData.content} />
    </div>
  );
};

enum Status {
  published = 'published',
  draft = 'draft',
  archived = 'archived',
}

export const getStaticPaths: GetStaticPaths = async () => {
  const { data, errors } = await client.query({
    query: GET_ALL_STATIC_PAGES,
    variables: { status: Status.published },
  });

  if (errors) {
    console.log('error in query in getStaticPaths, ', errors);
  }

  const paths = data.allStaticPages.map((page) => {
    return { params: { url: page.url } };
  });

  return {
    paths,
    fallback: false,
  };
};


export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { data, errors } = await client.query({
    query: GET_STATIC_PAGES_BY_URL,
    variables: { url: params.url },
  });

  if (errors) {
    console.log('error in query in getStaticProps, ', errors);
  }

  const { allStaticPages } = data;
  const pageData = allStaticPages[0];

  return {
    props: {
      pageData,
    },
  };
};

export default Page;

这是我的 ApolloClient：

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';

const isBrowser = typeof window !== 'undefined';
const uriHost = !isBrowser ? 'http://localhost:3000' : '';

const cache = new InMemoryCache();

const link = createHttpLink({
  uri: `${uriHost}/admin/api`,
  credentials: 'same-origin',
});

const client = new ApolloClient({
  ssrMode: typeof window === 'undefined',
  cache,
  link,
});

export default client;

有什么想法吗？

【问题讨论】：

我今天遇到了类似的问题。这是相关问题：github.com/vercel/next.js/discussions/12785 不幸的是，GraphQL 似乎没有简单的解决方案......
我通过使用 getServerSideProps 解决了这个问题。是的，我不再有 SSG，但至少我的应用程序构建和 SSR 还不错。
@NewbieDev90 请分享解决方案作为答案并标记正确？谢谢
我无法让 SSG 或 SSR（getStaticProps 或 getServerSideProps）在生产中工作。它们在 localhost 中运行良好，但在 vercel 的平台上构建时出现 500 个错误。

标签： reactjs graphql next.js apollo-client

【解决方案1】：

您正在尝试在 CI 环境中请求本地资源 localhost:3000。您必须将您的后端（Keystone）托管到某个服务器，我使用 Heroku（但在任何地方）并获取您的 CI 可以访问的 URL。

【讨论】：