Apollo-client-devtools: ERROR: n(...).map is not a function

Created on 4 Mar 2018  路  14Comments  路  Source: apollographql/apollo-client-devtools

Full websocket transport. Client and server side works well, with the exception of Apollo Client Developer

Chrom: 64.0.3282.186
Apollo Client Developer Tools 2.1.2

{
  "errors": [
    {
      "message": "n(...).map is not a function",
      "locations": [
        "TypeError: n(...).map is not a function\n    at e.request (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:38659)\n    at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:3681\n    at e.request (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:38421)\n    at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:3681\n    at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:38085\n    at new s (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:4855)\n    at l.subscribe (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:6185)\n    at n.<anonymous> (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:38914)\n    at n.t.emit (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:52786)\n    at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:19519"
      ]
    }
  ]
}
needs-reproduction

Most helpful comment

I got the same issue:

This works:

const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation }: any = getMainDefinition(query)
    return (
      // // Use WebSocket for only Subscriptions + Mutations
      (kind === 'OperationDefinition') && (operation === 'subscription' || operation === 'mutation')

    )
  },
  ws,
  http,
)

whereas this does not:

const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation }: any = getMainDefinition(query)
    return (

      // Use WebSocket for only Subscriptions + Mutations + Queries
      (kind === 'OperationDefinition') && (operation === 'subscription' || operation === 'mutation' || operation === 'query')
    )
  },
  ws,
  http,
)

Versions:

Apollo Client Developer Tools v2.1.3

"apollo-link-http": "^1.5.5",
"apollo-server": "^2.1.0",
"graphql-subscriptions": "^1.0.0",
"graphql-yoga": "^1.16.2",

All 14 comments

Same here!

Also using full websocket transport.

Same here (full websocket transport), it used to work but it stopped working a few weeks / months ago

Works now automagically!!!

I got the same issue:

This works:

const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation }: any = getMainDefinition(query)
    return (
      // // Use WebSocket for only Subscriptions + Mutations
      (kind === 'OperationDefinition') && (operation === 'subscription' || operation === 'mutation')

    )
  },
  ws,
  http,
)

whereas this does not:

const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation }: any = getMainDefinition(query)
    return (

      // Use WebSocket for only Subscriptions + Mutations + Queries
      (kind === 'OperationDefinition') && (operation === 'subscription' || operation === 'mutation' || operation === 'query')
    )
  },
  ws,
  http,
)

Versions:

Apollo Client Developer Tools v2.1.3

"apollo-link-http": "^1.5.5",
"apollo-server": "^2.1.0",
"graphql-subscriptions": "^1.0.0",
"graphql-yoga": "^1.16.2",

retested it now that the addon is availlable for Firefox again but this is still an issue. unfortunately it makes it unusable on websocket only server :(

Thanks for the bug report! Can you please post a full reproduction repo with an explanation of how to reproduce?

A fork of https://github.com/the-road-to-graphql/fullstack-apollo-subscription-example might be a good place to start.

Same issue. Websocket only link. It seems to work fine when I choose to Load from Cache... but then I assume all my results are stale...

Thanks @NickClark ! Can you help me with a reproduction? As I wrote in https://github.com/apollographql/apollo-client-devtools/issues/110#issuecomment-462408540, a fork of the-road-to-graphql/fullstack-apollo-subscription-example might be a good place to start.

I will if I can carve out some time, but I've been up to my neck lately, so don't hold your breath 馃槈

Thanks @NickClark . I really want to help; I just need some direction.

@justinanastos

Ok... I've mixed up a couple examples.
This first one is most similar to my setup, uses angular, and simple server: NickClark/apollo-tooling-failure-example

I then remade the example using a simple React app and a simple server on Codesandbox, which should make it faster to test out. Note: I had to popout the preview in order for Apollo Tools to even show in dev tools.

Client:
Edit Apollo Websocket Client

Server:
Edit Apollo Server

Thanks @NickClark ! I'll be back online tomorrow. I'll let you know what I find!

@justinanastos Any thoughts on this at the moment? This issue, and the one of the dev tools not refreshing when the app gets reloaded is really making it hard for me in Electron dev, especially since I can't just reload the Apollo dev tool panel by right clicking.

coming here again since a new Firefox version is now available, this issue is still present

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ryannealmes picture ryannealmes  路  5Comments

kissu picture kissu  路  4Comments

robclouth picture robclouth  路  5Comments

mvestergaard picture mvestergaard  路  6Comments

konsumer picture konsumer  路  7Comments