reactjs - 使用带有 NextJS getStaticPaths 和 getStaticProps (SSG) 的 apollo-client - 构建错误 - ECONNREFUSED
问题描述
我已经设置了一个动态路由静态生成的页面组件(希望是对的?),它在开发模式下完美运行。我可以在我的无头 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;
有任何想法吗?
解决方案
您正在尝试在 CI 环境中请求本地资源localhost:3000
。您必须将您的后端(Keystone)托管到某个服务器,我使用 Heroku(但在任何地方)并获得一个您的 CI 可以访问的 URL。
推荐阅读
- javascript - 单击时如何将 Html.PasswordFor 更改为 Html.TextboxFor?
- batch-file - 如何在 cmd 或 bat 文件中链接 MinGW
- razor - Razor 组件与 Razor 页面
- kubernetes - 使用 helm chart 时在 kubernetes 上动态刷新 pod 的秘密更新
- memory-leaks - 监控 ECS Fargate 中的任务以了解内存利用率
- python - 如何使用 discord.py 设置不可见状态
- google-cloud-functions - 在 Java 中对调用谷歌云功能的客户端进行身份验证
- python - 根据使用 Pyspark 的条件计算值 int 之间的差异
- angular - 国家下拉选择后无法读取未定义的属性“订阅”
- c++ - 使用 Visual Studio 编译 json 时出现问题