Expected signal to be an instanceof AbortSignal #6765

icco · 2020-08-03T01:41:05Z

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

The text was updated successfully, but these errors were encountered:

icco · 2020-08-03T02:25:32Z

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 · 2020-08-11T04:49:45Z

I am also getting this error, please help!

brandonbaraban · 2020-08-11T17:52:50Z

@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 · 2020-08-11T21:58:36Z

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 · 2020-08-12T18:29:59Z

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 · 2020-10-17T06:52:32Z

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 · 2020-11-04T22:15:54Z

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

icco · 2020-11-04T22:17:07Z

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 · 2020-11-04T22:23:13Z

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

mihaildu · 2020-11-26T20:32:38Z

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;

ghidoras · 2021-04-03T10:20:44Z

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;

that fixed the issue for me. thanks 👍

jcuffney · 2021-04-22T00:15:29Z

@mihaildu where would that snippit go? in pages/_app.js? Where do you add polyfill's?

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

global.fetch = abortableFetch(fetch).fetch;

ghidoras · 2021-04-22T07:47:11Z

@mihaildu where would that snippit go? in pages/_app.js? Where do you add polyfill's?
import fetch from 'node-fetch';
import { abortableFetch } from 'abortcontroller-polyfill/dist/cjs-ponyfill';

global.fetch = abortableFetch(fetch).fetch;

add that in pages/_document.tsx - see my example below

import Document, { Html, Head, Main, NextScript } from "next/document";
import fetch from 'node-fetch';
import { abortableFetch } from 'abortcontroller-polyfill/dist/cjs-ponyfill';
global.fetch = abortableFetch(fetch).fetch;

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta name="robots" content="index, follow" />
        <meta key="googlebot" name="googlebot" content="index,follow" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
      </Head>
      <body className="flex flex-col">
        <header id="page-head-container" className="sticky top-0 w-full z-30">
          <div id="banner-container" />
          <div id="header-container" />
        </header>
        <Main />
        <NextScript />
      </body>
      </Html>
    );
  }
}

export default MyDocument;

aoropeza · 2021-04-30T21:56:45Z

I got the same error and any advise here worked for me, I had to movedto another graphql client :(

bk52 · 2021-11-23T18:55:05Z

I got the same error and any advise here worked for me, I had to movedto another graphql client :(

@aoropeza

I found this solution and it works for me on Vercel

* Disable prerending for now due to graphql rate limiting * Debug vercel build errors * Disable telemetry * New main icon * Add passhref per next docs * Try apollographql/apollo-client#6765 to fix build error on vercel

RishikeshDarandale · 2022-02-01T14:51:07Z

@icco , Is your problem solved with removal of auth0-react ? I am also facing the same issue with react-app (not next.js) with apollo client 2.6.

cfalzone · 2022-11-09T16:34:45Z

So FWIW, updating from node v14 to v16 fixed this error for me.

bignimbus · 2022-11-09T16:39:42Z

Thanks all, I'm going to close this issue as it seems there are workarounds and some upstream dependencies that may make this not actionable for the team here. We really appreciate all the idea-sharing!

icco mentioned this issue Aug 3, 2020

Fix icco/writing#237

Merged

icco mentioned this issue Nov 4, 2020

Static icco/writing#303

Merged

brainkim added the 🙃 upstream label Apr 12, 2021

brainkim added the 🔗 apollo-link label May 3, 2021

brainkim self-assigned this May 3, 2021

vnugent pushed a commit to OpenBeta/open-tacos that referenced this issue Jan 4, 2022

Try apollographql/apollo-client#6765

4fa43bf

RishikeshDarandale mentioned this issue Feb 2, 2022

Expected signal to be an instanceof AbortSignal auth0/auth0-react#323

Closed

hwillson added the 🔍 investigate Investigate further label May 31, 2022

hwillson unassigned brainkim May 31, 2022

bignimbus added the 🌤 has-workaround label Nov 9, 2022

bignimbus closed this as completed Nov 9, 2022

github-actions bot locked as resolved and limited conversation to collaborators Feb 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expected signal to be an instanceof AbortSignal #6765

Expected signal to be an instanceof AbortSignal #6765

icco commented Aug 3, 2020

icco commented Aug 3, 2020

brandonbaraban commented Aug 11, 2020

brandonbaraban commented Aug 11, 2020

icco commented Aug 11, 2020

brandonbaraban commented Aug 12, 2020

meds commented Oct 17, 2020

icco commented Nov 4, 2020

icco commented Nov 4, 2020

icco commented Nov 4, 2020

mihaildu commented Nov 26, 2020

ghidoras commented Apr 3, 2021

jcuffney commented Apr 22, 2021 •

edited

Loading

ghidoras commented Apr 22, 2021 •

edited

Loading

aoropeza commented Apr 30, 2021 •

edited

Loading

bk52 commented Nov 23, 2021 •

edited

Loading

RishikeshDarandale commented Feb 1, 2022

cfalzone commented Nov 9, 2022

bignimbus commented Nov 9, 2022

Expected signal to be an instanceof AbortSignal #6765

Expected signal to be an instanceof AbortSignal #6765

Comments

icco commented Aug 3, 2020

icco commented Aug 3, 2020

brandonbaraban commented Aug 11, 2020

brandonbaraban commented Aug 11, 2020

icco commented Aug 11, 2020

brandonbaraban commented Aug 12, 2020

meds commented Oct 17, 2020

icco commented Nov 4, 2020

icco commented Nov 4, 2020

icco commented Nov 4, 2020

mihaildu commented Nov 26, 2020

ghidoras commented Apr 3, 2021

jcuffney commented Apr 22, 2021 • edited Loading

ghidoras commented Apr 22, 2021 • edited Loading

aoropeza commented Apr 30, 2021 • edited Loading

bk52 commented Nov 23, 2021 • edited Loading

RishikeshDarandale commented Feb 1, 2022

cfalzone commented Nov 9, 2022

bignimbus commented Nov 9, 2022

jcuffney commented Apr 22, 2021 •

edited

Loading

ghidoras commented Apr 22, 2021 •

edited

Loading

aoropeza commented Apr 30, 2021 •

edited

Loading

bk52 commented Nov 23, 2021 •

edited

Loading