I have successfully set up a dynamic route for a statically generated page component (I hope that's correct?) which functions perfectly in development mode. I am able to create pages in my headless CMS (KeystoneJS) and view them on my local environment.
However, when I run npm run build (for continuous integration), I encounter a peculiar error like the one below:
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'
}
and also a series of these errors:
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'
}
This is how my page component is structured:
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;
The ApolloClient configuration looks like this:
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;
Any suggestions or solutions?