apollo-client: createNetworkInterface is not a function

I just opened a project and updated react-apollo and it detonated everything, which is also highlighting that https://github.com/apollographql/react-apollo is currently some troll documentation.

I was using these like this in React Native:

import { ApolloClient, createNetworkInterface, ApolloProvider } from 'react-apollo'

It definitely doesn’t work in React Web with react-apollo 2.0.

I checked my RN app and even though I installed it last week~, its using react-apollo 1.4.

I will downgrade back to sub 2.0, and post my results since someone else will surely see this as well.

Thanks to the magic of time travel, here are my results:

$ npm install --save react-apollo@^1.4

There is no 1.5, 1.6, 1.7, 1.8, or 1.9, so that will downgrade you to the newest non-2.0 version, and you can use:

import { ApolloClient, createNetworkInterface, ApolloProvider } from 'react-apollo'

You don’t need to install apollo-client.

Just kidding, apollo-client is included with react-apollo. You should see it in node_modules if you burn everything to the ground and just install react-apollo 1.4~.

Here is some bonus code, just in case anyone wants to confirm what works well:

./src/index.js

import { ApolloClient, createNetworkInterface, ApolloProvider } from 'react-apollo'

const tokenOnLoad = localStorage.getItem('token')
if (tokenOnLoad) store.dispatch({ type: LOGIN_SUCCESS })

const networkInterface = createNetworkInterface({
  uri: 'http://localhost:7000/graphql',
  opts: {
    credentials: 'same-origin',
    mode: 'cors'
  }
})

networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) req.options.headers = {}
    const token = localStorage.getItem('token')
    req.options.headers.authorization = token || null
    next()
  }
}])

export const client = new ApolloClient({
  networkInterface,
  dataIdFromObject: (o) => o.id
})

const Root = () => (
  <ApolloProvider store={store} client={client}>
    <Router history={history}>
      <Route path="/" component={App} />
    </Router>
  </ApolloProvider>
)

ReactDOM.render(
  <Root />,
  document.querySelector('#root')
)

I imagine you will want to avoid anything to do with this code if you are looking to get to react-apollo 2.0.

I checked it out and the setup looked haywire breaking change, so I won’t be switching to it ASAP unless someone posts a migration path and usage of graphql() and withApollo() are virtually identical.

same 🔢

I confirm downgrading react-apollo from version 2 to 1.4 solved my problem. Special thanks to @amackintosh

👋 me too

I solved this problem by using apollo-boost

import React from 'react'
import { AppRegistry } from 'react-native'
import App from './App'
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'

// Pass your GraphQL endpoint to uri
const client = new ApolloClient({ uri: 'https://d9f6e34e.ngrok.io/graphql' })

const ApolloApp = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
)

AppRegistry.registerComponent('myApp', () => ApolloApp)

If the problem raise after update apollo-client to v.2.0 this upgrade instructions may help

same here

Uncaught TypeError: Object(...) is not a function
    at Object../src/index.js (:3000/static/js/bundle.js:134591)
    at __webpack_require__ (:3000/static/js/bundle.js:670)
    at fn (:3000/static/js/bundle.js:88)
    at Object.0 (:3000/static/js/bundle.js:134936)
    at __webpack_require__ (:3000/static/js/bundle.js:670)
    at ./node_modules/algebra-latex/lib/formatters/format-math.js.Object.defineProperty.value (:3000/static/js/bundle.js:716)
    at :3000/static/js/bundle.js:719

I have the same issue.

main.js?4379:14 Uncaught TypeError: (0 , _apolloClient.createNetworkInterface) is not a function
    at eval (main.js?4379:14)
    at Object.<anonymous> (app.js:2724)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at Object.<anonymous> (app.js:2619)
    at __webpack_require__ (app.js:679)
    at app.js:725
    at app.js:728

You use a deprecated function!

To be able to use it you can downgrade react-apollo to 1.4.

yarn upgrade react-apollo@1.4

Also make sure that you’re importing from react-apollo.

@jaroslav-kubicek still throwing

TypeError: (0 , _apolloClient.createNetworkInterface) is not a function

event when

import ApolloClient, { createNetworkInterface } from 'apollo-client';

@christiansaiki works perfectly. just learned about this

There is error in docs. Check that you are importing from apollo-client, not from react-apollo:

import ApolloClient, { createNetworkInterface } from 'apollo-client';