reactjs - 将 apollo-client 与 NextJS getStaticPaths 和 getStaticProps (SSG) 结合使用 - 构建时出错 - ECONNREFUSED

Question

我已经设置了一个动态路由静态生成的页面组件(希望是这样吗？)，它在开发模式下完美运行。我可以在我的 headless 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;

有什么想法吗？

Answer 1

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