Apollo-client: Expected signal to be an instanceof AbortSignal

[icco]

Intended outcome:

I expect to see no error.

Actual outcome:

I'm upgrading my blog to apollo 3.0 on Next w/ auth from Auth0. I'm getting the following error, which from reading code seems to be related to Apollo raising a networking error.

Nothing seems to be in the console, but here's a dump of it.
localhost-1596418187932.log

How to reproduce the issue:

I haven't figured out what the root cause is to reproduce. https://github.com/icco/writing/pull/237/files is my code where I'm migrating to the updated API.

Versions

$ npx envinfo@latest --preset apollo --clipboard
npx: installed 1 in 2.424s

  System:
    OS: macOS 10.15.6
  Binaries:
    Node: 12.16.0 - ~/.nvm/versions/node/v12.16.0/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.48
    Firefox: 71.0
    Safari: 13.1.2
  npmPackages:
    @apollo/client: ^3.1.1 => 3.1.1
    apollo-link-persisted-queries: ^0.2.2 => 0.2.2

[icco]

Full dump of the error stack trace:

ApolloError: Expected signal to be an instanceof AbortSignal
    at new ApolloError (/Users/nat/Projects/writing/node_modules/@apollo/client/errors/errors.cjs.js:31:28)
    at /Users/nat/Projects/writing/node_modules/@apollo/client/core/core.cjs.js:1403:19
    at /Users/nat/Projects/writing/node_modules/@apollo/client/utilities/utilities.cjs.js:921:69
    at new Promise (<anonymous>)
    at Object.error (/Users/nat/Projects/writing/node_modules/@apollo/client/utilities/utilities.cjs.js:921:21)
    at notifySubscription (/Users/nat/Projects/writing/node_modules/zen-observable/lib/Observable.js:140:18)
    at onNotify (/Users/nat/Projects/writing/node_modules/zen-observable/lib/Observable.js:179:3)
    at SubscriptionObserver.error (/Users/nat/Projects/writing/node_modules/zen-observable/lib/Observable.js:240:7)
    at /Users/nat/Projects/writing/node_modules/@apollo/client/utilities/utilities.cjs.js:909:68
    at Array.forEach (<anonymous>) {
  graphQLErrors: [],
  networkError: TypeError: Expected signal to be an instanceof AbortSignal
      at new Request (/Users/nat/Projects/writing/node_modules/next/dist/compiled/node-fetch/index.js:1:144524)
      at /Users/nat/Projects/writing/node_modules/next/dist/compiled/node-fetch/index.js:1:146996
      at new Promise (<anonymous>)
      at fetch (/Users/nat/Projects/writing/node_modules/next/dist/compiled/node-fetch/index.js:1:146956)
      at /Users/nat/Projects/writing/node_modules/@apollo/client/link/http/http.cjs.js:232:13
      at new Subscription (/Users/nat/Projects/writing/node_modules/zen-observable/lib/Observable.js:197:34)
      at Observable.subscribe (/Users/nat/Projects/writing/node_modules/zen-observable/lib/Observable.js:279:14)
      at /Users/nat/Projects/writing/node_modules/apollo-link-persisted-queries/lib/bundle.umd.js:155:47
      at new Subscription (/Users/nat/Projects/writing/node_modules/zen-observable/lib/Observable.js:197:34)
      at Observable.subscribe (/Users/nat/Projects/writing/node_modules/zen-observable/lib/Observable.js:279:14),
  message: 'Expected signal to be an instanceof AbortSignal',
  extraInfo: undefined
}

[brandonbaraban]

I am also getting this error, please help!

[brandonbaraban]

@icco There seems to be an issue with using ApolloClient in tandem with @auth0/auth0-react. I got the error to go away by using @auth0/nextjs-auth0 instead.

[icco]

I'm only seeing this error when using apollo in nextjs's get static functions. But unclear if it's due to auth0 or apollo or nextjs.

I thought it was a big with the fetch included with nextjs but removed that and didn't solve the issue.

[brandonbaraban]

Yeah, I was only seeing it in getServerSideProps and played around with fetch but using @auth0/nextjs-auth0 was the only thing that made the error go away 😅. Don't really understand why though to be completely honest.

[meds]

can confirm I'm seeing this exact issue, not a huge fan of this issue because the next's specific auth0 doesn't support the hooks from the react version

[icco]

So I removed auth0 and I'm pretty sure this is coming from inside apollo. https://github.com/node-fetch/node-fetch/issues/784 could be the root issue...

[icco]

function client() {
  return new ApolloClient({
    ssrMode: true,
    link: new HttpLink({ uri: GRAPHQL_ORIGIN }),
    cache: new InMemoryCache(),
  });
}

In nextjs page

export async function getStaticPaths() {
  const result = await client().query({
    query: gql`
      query postIDs($offset: Int!, $perpage: Int!) {
        posts(input: { limit: $perpage, offset: $offset }) {
          id
        }
      }
    `,
    variables: {
      offset: 0,
      perpage: 2000,
    },
  });

  return {
    paths: result["data"]["posts"].map(function (d) {
      return { params: { pid: d.id } };
    }),
    fallback: true,
    revalidate: 1,
  };
}

[icco]

Might be that the root cause is https://github.com/vercel/next.js/issues/18044. Lots of versions of node-fetch and cross-fetch in my yarn.lock

[mihaildu]

Hey guys, I had the same issue trying to use auth0-react with next.js and apollo client. This is not an apollo client issue.

As I understand it next.js will prefetch apollo queries using node-fetch (e.g. if you fetch data in getServerSideProps). auth0-react package is using auth0-spa-js package in the back, which is using AbortController polyfills here https://github.com/auth0/auth0-spa-js/blob/master/src/index.ts#L10

From abortcontroller-polyfill package it seems you need to patch node-fetch with abortableFetch https://github.com/mo/abortcontroller-polyfill#using-it-on-nodejs
Not sure exactly why you need to do this, but doing so seems to fix the issue. I just assume it messes up with AbortController and AbortSignal in a way that isAbortSignal will fail.

Patching the global.fetch in the next app seems to get rid of this error (for example in app.js):

import fetch from 'node-fetch';
import { abortableFetch } from 'abortcontroller-polyfill/dist/cjs-ponyfill';

global.fetch = abortableFetch(fetch).fetch;