Using apollo-client with NextJS getStaticPaths and getStaticProps (SSG) - error on build - ECONNREFUSED

Question

I have set up a dynamic route statically generated page component (hope that's right?) which works perfectly in dev mode. I can create pages in my headless CMS (KeystoneJS) and can create and view those pages on my local dev.

However, when I run npm run build (for CI), I get a strange error like this:

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 bunch of these:

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'
}

Here's what my page component looks like:

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;

And this is my 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;

Any ideas?

Answer 1

You are trying to request for your local resource localhost:3000 in your CI environment. You will have to host your backend (Keystone) to some server, I use Heroku, (but anywhere) and get a URL that can be accessible by your CI.