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

Posted 2023-03-08

【中文标题】使用带有 NextJS getStaticPaths 和 getStaticProps (SSG) 的 apollo-client - 构建错误 - ECONNREFUSED

【英文标题】：Using apollo-client with NextJS getStaticPaths and getStaticProps (SSG) - error on build - 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(
  s-s-rMode: typeof window === 'undefined',
  cache,
  link,
);

export default client;

有什么想法吗？

【问题讨论】：

我今天遇到了类似的问题。这是相关问题：github.com/vercel/next.js/discussions/12785 不幸的是，GraphQL 似乎没有简单的解决方案......

我通过使用 getServerSideProps 解决了这个问题。是的，我不再有 SSG，但至少我的应用程序构建和 s-s-r 还不错。

@NewbieDev90 请分享解决方案作为答案并标记正确？谢谢

我无法让 SSG 或 s-s-r（getStaticProps 或 getServerSideProps）在生产中工作。它们在 localhost 中运行良好，但在 vercel 的平台上构建时出现 500 个错误。

【参考方案1】：

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