GraphIQL + ApolloDevTools -- "TypeError: forward is not a function"

[garethpbk]

Hiya,

I've been encountering the same error every time I've used apollo-link-rest: opening up GraphiQL in the Apollo devtools always shows a "TypeError: forward is not a function" error. The full text of the error:

{ "errors": [ { "message": "forward is not a function", "locations": [ "TypeError: forward is not a function\n at RestLink../node_modules/apollo-link-rest/bundle.umd.js.RestLink.request (http://localhost:3000/static/js/bundle.js:5566:24)\n at http://localhost:3000/static/js/bundle.js:5746:33\n at ApolloLink.request (http://localhost:3000/static/js/bundle.js:2602:20)\n at ApolloLink.request (http://localhost:3000/static/js/bundle.js:5745:31)\n at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:3681\n at e.request (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:38654)\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\n at n (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:36148)" ] } ] }

Queries and mutations with the @rest directive seem to be working fine and do not throw any other errors, so it's not a completely blocking issue, but it does potentially affect some other Apollo Client capabilities e.g. trying to use the @client directive does not work and throws the same error (as the error payload in a component from react-apollo).

I cloned the three example react-apollo projects (simple, advanced, typescript) and the same error appears in all three. #121 references this issue but there does not appear to be a fix; the fix that is included is for a separate "failed to fetch" bug. There is also a mention of a missing @rest or @client directive as a potential cause, but as mentioned this is happening with the sample projects as well as my own so I don't think a missing directive is the culprit.

To reproduce, just clone the example projects, install and start and open up Apollo dev tools in Chrome (current version I'm having this error in is 70.0.3538.77).

Thanks for looking at this, love the package and find it incredibly useful!

[fbartho]

I don't think GraphIQL supports apollo-link-state / apollo-link-rest -- I don't think they support links in general. Do you have examples of that working?

[garethpbk]

Sure, GraphiQL in Apollo dev tools seems to work. Using the JSONPlaceholder api, RestLink uri set to https://jsonplaceholder.typicode.com - here's what I get initially before any queries are run:

after running query to get all users:

or with the "simple" example project:

Something else I've noticed is that the "read from cache" option doesn't work with new entries created with the JSONPlaceholder api; a POST mutation writes a new entry to the cache properly, but a subsequent query attempts to query remotely even with "read from cache" selected. As the new entry isn't actually created this returns null from the remote endpoint as expected, but it is created in the cache, so "read from cache" should return it? This is probably agnostic to apollo-link-rest, and outside the scope of this issue, but still interesting.

[cstoddart]

I am getting the same error in GraphiQL, forward is not a function. Everything besides cache appears to be working though.

[nathantqn]

Any updates on this guys, I had the same problem :(

[cgatian]

@cstoddart Your cache panel is empty, correct?

Does anyone know how to view the cache without the devtools?

[heymanhn]

I'm experiencing the same thing. @cgatian yes, my cache panel is empty.

It's hard to embrace apollo's toolchain when these breakages occur for so long. Is apollo-link-rest still being actively worked on?

[fbartho]

@heymanhn -- Yes ApolloLinkRest is being actively developed. But this is open source. I'm happy to help you get a PR tested & delivered, but I don't have experience with ApolloDevTools.

We need somebody who does, or is willing to dive into their codebase to figure out what's necessary to be compatible with it. I challenge you to figure out what's missing and I'd love to support your contributions!

I want to be clear, that I don't know that apollo-link-rest ever worked with ApolloDevTools, so I'd say this is less of a breakage, and more of a missing desired feature.

Additionally, I personally use apollo-link-rest with React-Native, and back a year ago, ApolloDevTools wasn't compatible with React-Native.

They've since announced that they fixed that, but I haven't been able to activate ApolloDevTools for my team's react-native project, so I don't know what's wrong there.

[Hilaryous]

Hi! I was able to look a little bit into what is causing this issue.
It looks like this operation get called by the apollo-client-devtools.

When it gets here however, forward is undefined.

I'm not entirely sure how this all works otherwise I would make a PR to fix the issue. When I did change the !isRestQuery check to !isRestQuery && forward I was able to silence the above error. However, I got a new error:

Error: Type Query must define one or more fields.
    at t.assertValidSchema (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:258433)
    at O (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:272246)
    at k (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:271277)
    at t.execute (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:270565)
    at t.v (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:806774)
    at t.n.emit (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:394893)
    at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:517657

Here's an example app that I used to see/debug this issue: https://github.com/Hilaryous/simple-react-app/tree/apollo-link-rest-example.

Thank you for all your work on this library. If I can help in any way I'm glad to do so.

[zachdixon]

I'm running into this recently and have narrowed the error is my case to the IntrospectionQuery, which is I believe graphiql/devtools querying the graphql server for the schema? Problem is, I'm only using apollo-client and apollo-link-rest, so there isn't a server or schema, except for the cache schema (if there is one). In turn, my apollo devtools is blank. Not exactly sure what the fix here would be, everything worked at one point.

[edgars-sirokovs]

I'm running into this recently and have narrowed the error is my case to the IntrospectionQuery, which is I believe graphiql/devtools querying the graphql server for the schema? Problem is, I'm only using apollo-client and apollo-link-rest, so there isn't a server or schema, except for the cache schema (if there is one). In turn, my apollo devtools is blank. Not exactly sure what the fix here would be, everything worked at one point.

Same here

[fbartho]

We saw ApolloDevTools working with apollo-link-state, apollo-link-Rest in React Native Debugger, as recently as last Thursday. Are we sure this is still an active problem? What versions are you on @edgars-sirokovs ?

[edgars-sirokovs]

We saw ApolloDevTools working with apollo-link-state, apollo-link-Rest in React Native Debugger, as recently as last Thursday. Are we sure this is still an active problem? What versions are you on @edgars-sirokovs ?

@fbartho 2.2.4

[edgars-sirokovs]

@fbartho just checked again - it is kinda working now. At least not blank anymore.
I still have issues though - not being able to scroll cache view and Documentation explorer is not showing schema (I have only client-side schema passed in via typeDefs).

[fbartho]

I don’t know what the documentation explorer needs for support of apollo-link-rest but it wouldn’t surprise me if there’s work to do, and/or it will never work well. Accepting PRs if work is needed here!

Scrolling the cache view definitely seems like a bug in the ApolloDevTools code,

But I’m glad you’ve made progress @edgars-sirokovs !

[patsanes]

We saw ApolloDevTools working with apollo-link-state, apollo-link-Rest in React Native Debugger, as recently as last Thursday. Are we sure this is still an active problem? What versions are you on @edgars-sirokovs ?

I test it with the simple project and it doesn’t work, the Apollo DevTools tab is available but it is always blank and I’m getting the next error. https://github.com/apollographql/apollo-link-rest/tree/master/examples/simple

@fbartho I did the same with the project I’m working in react native with react-native-debugger and got the same problem. Could you share your setup or what versions were you using ?

[fbartho]

We learned today that it works -- but not the GraphiQL tab, only the other tabs: apollographql/apollo-client-devtools#227

[bennypowers]

Due to what appears to be this same issue, I'm unable to read local schema Docs in devtools GraphiQL.

Running this introspection query displays [object Object] in the response panel, and console reports [Network error]: TypeError: forward is not a function

{
  __schema {
    types {
      name
    }
  }
}

My client has no graphql server:

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { persistCache } from 'apollo-cache-persist';
import localForage from 'localforage';
import typeDefs from './schema.graphql';
import { resolvers } from './resolvers';
import { link } from './link';
import { initialState } from './initialState';
export let client;
export async function createApolloClient() {
  const cache = new InMemoryCache();
  await persistCache({ cache, storage: localForage, serialize: false });
  client = new ApolloClient({ cache, link, resolvers, typeDefs });
  window.__APOLLO_CLIENT__ = client;
  cache.writeData({ data: initialState });
  return client;
}

See https://spectrum.chat/apollo/apollo-link-state/client-has-typedefs-but-no-docs-in-graphiql~8a80e439-3257-4fce-a666-a1e75c3cec63

[crbanman]

Not sure if this is exactly related to the use case as everyone above, but this is the only relevant search result I could find with the error I was getting that I eventually solved.

I recently ran into this error when I was trying to add apollo-link-rest to an existing application using @apollo/client.

tl;dr The problem turned out to be that you can't pass both uri and link as option parameters when defining a new ApolloCient. Instead, you must remove the uri parameter and create an HttpLink using createHttpLink and then use from() to combine your links and them to the link option parameter.

Before I added the rest link, this is what my definition looked like:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: '/api/graphql',
  cache: new InMemoryCache(),
});

On reading the documentation, I was under the impression that I should be able to add a rest link by defining a new RestLink and adding the additional link parameter to my options like this:

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { RestLink } from 'apollo-link-rest';

const restLink = new RestLink({
  uri: '/api',
});

const client = new ApolloClient({
  uri: '/api/graphql',
  cache: new InMemoryCache(),
  link: restLink,
});

However, this configuration caused the TypeError: forward is not a function error to occur and the client to no longer work.

After reading further into the documentation on links, I realized (though I couldn't see it explicitly said, and there may be cases where this is incorrect) that you can't use the uri and link option parameters in the ApolloClient definition at the same time. Using this new info I was able to fix the issue by removing the uri parameter and creating an HttpLink that I then combined with by RestLink using from() and everything finally worked (note that as per the documentation, the RestLink should go before the HttpLink):

import {
  ApolloClient, InMemoryCache, from, createHttpLink,
} from '@apollo/client';
import { RestLink } from 'apollo-link-rest';
const httpLink = createHttpLink({
  uri: '/api/graphql',
});

const restLink = new RestLink({
  uri: '/api',
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([restLink, httpLink]),
});

[etylsarin]

thanks @crbanman you saved my day! 💯

[fbartho]

Looks like there's both a workaround, and it was an upstream issue in ApolloClient or ApolloDevTools, so I'm closing this for now!