Apollo-client: [Network error]: TypeError: forward is not a function

Created on 16 Aug 2020  路  4Comments  路  Source: apollographql/apollo-client

I tried to use Error Link as in document's example

const link = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    )
  if (networkError) console.log(`[Network error]: ${networkError}`)
})
const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  link: ApolloLink.from([link])
})

but got the following in the console.

[Network error]: TypeError: forward is not a function

After some try, I found adding HttpLink would work

const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([link, new HttpLink({uri: '/graphql'})])
})

Probably worth mention it in the doc.

Most helpful comment

Same issue here. The example in the Docs seems "unfinished" in how ApolloClient 3 expects us to handle onError.


Seems like you need to do:

const cache = new InMemoryCache()

const errorLink = onError(({ graphQLErrors, operation, forward }) => {
  if (graphQLErrors) {
    // Handle Errors
  }

  forward(operation)
})

const httpLink = new HttpLink({
  uri: URI_PATH
})

export const apolloClient = new ApolloClient({
  cache,
  link: from([errorLink, httpLink])
})

All 4 comments

Same issue here. The example in the Docs seems "unfinished" in how ApolloClient 3 expects us to handle onError.


Seems like you need to do:

const cache = new InMemoryCache()

const errorLink = onError(({ graphQLErrors, operation, forward }) => {
  if (graphQLErrors) {
    // Handle Errors
  }

  forward(operation)
})

const httpLink = new HttpLink({
  uri: URI_PATH
})

export const apolloClient = new ApolloClient({
  cache,
  link: from([errorLink, httpLink])
})

UPDATE:
Updated the code snippet with the solution. I still think it should work with uri defined in ApolloClient, at least IntelliSense tells me it is fine. Either way, there is something wrong in the documentation or supporting in the implementation.
With the following code, I still get the error:

const errorLink = onError(({ graphQLErrors, networkError, forward, operation }) => {
  if (graphQLErrors) {
    logger.error(graphQLErrors)
  }
  if (networkError) {
    logger.warn(networkError)
  }
  forward(operation)
})

+ const httpLink = new HttpLink({
+   uri: process.env.NEXT_PUBLIC_CONTENT_API,
+ })

function createApolloClient() {
  return new ApolloClient({
    cache: new InMemoryCache(cacheConfig),
    connectToDevTools: process.env.NODE_ENV === "development",
+    link: from([errorLink, httpLink])
-    link: errorLink,
-    uri: process.env.NEXT_PUBLIC_CONTENT_API,
  })
}
ApolloError: forward is not a function
...
networkError: TypeError: forward is not a function

I am on @apollo/[email protected]

It seems that the errorLink must not be the first link in the chain. I've moved the error link between my authentication and http link and the error disappeared.

  return new ApolloClient({
    link: from([authLink, errorLink, httpLink]),
    cache: new InMemoryCache(),
  });

Is this behavior intentional or is it a bug?

@atstojanov I was also having this exact issue. Thanks for this! This worked. But, it would be helpful if the example/documentation was changed if this is intentional (which I'm assuming it's not).

Great work on everything so far. Apollo client is awesome! :)

Was this page helpful?
0 / 5 - 0 ratings