React-apollo: Update the docs, please... Total mess with the v2.0.0 version

[stgewehr]

Hello!

I'm trying to use the "react-apollo", following the docs... and there is an error after an error, because there are nothing up-to-date in the docs at all!
createNetworkInterface, gql... how it was published to the npm?

Thanks!

[DanceParty]

Yes please, or at least put a disclaimer in the documentation for the time being.

[TimoGlastra]

okay that's the problem i'm facing i think. Been busy all night trying to get it to work. And i thought i was doing something wrong.

Edit:
They have an migration page which also covers react-apollo: https://github.com/apollographql/apollo-client/blob/master/docs/source/2.0-migration.md
https://www.apollographql.com/docs/react/2.0-migration.html

[stgewehr]

@TimoGlastra @TimoGlastra Thanks! I also spent several hours and managed to get it to work.
But the idea of this issue remains the same - Apollo should use version control for documents and update them together with the release of new code.

[DavidWells]

Same issue here.

createNetworkInterface doesn't exist anymore apparently (but all examples & docs use it$

[jmlivingston]

Yes, please fix. Great library, but really getting lost in the multiple versions of documentation sites.

[msmfsd]

Agree, please update docs for v2, thanks!

[namnm]

Too much in my head, must downgrade the package and wait for the more stable release.

[msmfsd]

For anyone wanting to use react-apollo v2 I managed to get it working as follows:

libs

"apollo-cache-inmemory": "1.0.0",
"apollo-client": "2.0.0",
"apollo-link": "1.0.0",
"apollo-link-error": "1.0.0",
"apollo-link-http": "1.0.0"
"graphql": "0.11.3",
"graphql-tag": "2.0.0",
"react-apollo": "2.0.0"

config

import {ApolloClient} from 'apollo-client'
import {HttpLink} from 'apollo-link-http'
import {InMemoryCache} from 'apollo-cache-inmemory'
import {ApolloLink} from 'apollo-link'
import {onError} from 'apollo-link-error'

// link replaces createNetworkInterface
const httpLink = new HttpLink({uri: '/graphql'})

// cache - note if you have fragments on interfaces or unions see http://dev.apollodata.com/react/initialization.html#fragment-matcher
const cache = new InMemoryCache({
  addTypename: true,
  dataIdFromObject: result => {
    if (result.uuid && result.__typename) {
      return result.__typename + result.uuid
    }
    return null
  },
})

// replaces networkInterface.use(applyMiddleware...)
const MiddlewareLink = new ApolloLink((operation, forward) => {
  const authToken = "BLAHBLAH-ABCD1234"
  operation.setContext({
    headers: {authorization: authToken},
  })
  return forward(operation)
})

// logger
const LoggerLink = new ApolloLink((operation, forward) => {
  if (process.env.NODE_ENV === 'development') console.log(`[GraphQL Logger] ${operation.operationName}`)
  return forward(operation).map(result => {
    if (process.env.NODE_ENV === 'development') console.log(
      `[GraphQL Logger] received result from ${operation.operationName}`,
    )
    return result
  })
})

// error - use your error lib here
const ErrorLink = 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}`)
})

// concat links, NOTE: httpLink must be last
const link = ApolloLink.from([MiddlewareLink, LoggerLink, ErrorLink, httpLink])

// create apollo client
const client = new ApolloClient({link, cache})

export default client

Init

// If you still need redux note that ApolloProvider no longer has redux Provider so see below config for client and store
import { ApolloProvider } from 'react-apollo'
import {createStore} from 'redux'
import client from './apollo'

const store = createStore(... etc.

ReactDOM.render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <MyApp />
    </Provider>
  </ApolloProvider>,
  document.getElementById('root')
)

Finally remember to put your graphql imports back to seperate libs:

/* v1: import {graphql, gql} from 'react-apollo' */
import {graphql} from 'react-apollo'
import gql from 'graphql-tag'

[good-idea]

@msmfsd Thanks for this!

It's missing import { ApolloProvider } from 'react-apollo' at the top.

With this setup, I get an error:

Unhandled (in react-apollo) Error: Network error: forward is not a function
    at new ApolloError (webpack-internal:///./node_modules/apollo-client/errors/ApolloError.js:36:28)
    at ObservableQuery.currentResult (webpack-internal:///./node_modules/apollo-client/core/ObservableQuery.js:94:24)
    ....

but if I change this:

const link = MiddlewareLink.concat(LoggerLink, ErrorLink, httpLink)

to:

const link = MiddlewareLink.concat(httpLink)

it works fine. Instead of debugging or having logging, I'll just wait for final v2 docs..

[peggyrayzis]

Hi everyone! Sorry about the less than optimal docs experience, we were in the process of migrating over our docs to a new provider. For 2.0, please use https://www.apollographql.com/docs/react/.

@good-idea the reason why you're getting an error with ApolloLink.concat is that you can only chain two links with concat. For three or more links, use ApolloLink.from([LoggerLink, ErrorLink, HttpLink]) which accepts an array of links.

I'm going to close this issue, but please open a new issue if you have a specific question or suggestion about the docs. Thanks!

[msmfsd]

@good-idea I have updated my post

[peteratticusberg]

@peggyrayzis I've put up a PR to include the link you've provided above in the README which should serve as a temporary fix here

[luiscoms]

You can use ApolloLink.concat(LoggerLink).concat(ErrorLink).concat(HttpLink) too

[axe-z]

it's kind of a mess right now, really wanted to learn this and skip redux in my projects, but geeeeez. The demo on apollo-client for react: example app Pupstagram, is not working , so many packages... it's hard to know what does what, and renaming parts over and over leaves me with the feeling that things are not handle right over there. Keep things tight, no rush to be first, do it right, less is more.