please provide example about apollo-link-state

[barbalex]

Seems that the docs for apollo on links (https://www.apollographql.com/docs/react/basics/network-layer.html) do not explain everything. I could not find any information on (non?) terminating links.

And it does not explain if the order of links is of any importance.

[carinakoo]

Those docs are here: https://www.apollographql.com/docs/link/overview.html#terminating

Try swapping the order of your httpLink and localStateLink.

Also, the Apollo slack is a good place to post these kinds of questions. Good luck!

[carinakoo]

It looks like your ./localLinkState file exports a function which returns the local link, rather than the link itself. The local link is returned by withClientState.

So removing the () =>:

export default withClientState({
  Query: {
    // provide initial state
    activeobjects: () => [],
  },
  Mutation: {
    // update values in the store on mutations
    setActiveObject: (_, { id, name }, { cache }) => {
      const data = {
        activeobjects: [{ id, name, __typename: 'activeobject' }],
      }
      cache.writeQuery({ query, data })
      return null
    },
  },
})

[barbalex]

In my case I get this warning:

Error: You are calling concat on a terminating link, which will have no effect

After which the query for the local state is sent to the graphql server which then errors out.

I instantiate the client like this:

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { concat } from 'apollo-link'

import localStateLink from './localStateLink'

const httpLink = createHttpLink({ uri: 'http://localhost:5000/graphql' })
const client = new ApolloClient({
  link: concat(httpLink, localStateLink),
  cache: new InMemoryCache(),
})

[barbalex]

Thanks for the docs link.

If I swap links, i.e.:

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { concat } from 'apollo-link'

import localStateLink from './localStateLink'

const httpLink = createHttpLink({ uri: 'http://localhost:5000/graphql' })
const client = new ApolloClient({
  link: concat(localStateLink, httpLink),
  cache: new InMemoryCache(),
})

I get the warning: Error: You are calling concat on a terminating link, which will have no effect,

followed by this error: Network error: _this.inFlightRequestObservables[key].subscribe is not a function

Being the noob I am it is well possible that there is an error in my localStateLink. This is the module:

import { withClientState } from 'apollo-link-state'
import gql from 'graphql-tag'

const query = gql`
  query ActiveObjectsQuery {
    activeobjects @client {
      id
      name
    }
  }
`

export default () =>
  withClientState({
    Query: {
      // provide initial state
      activeobjects: () => [],
    },
    Mutation: {
      // update values in the store on mutations
      setActiveObject: (_, { id, name }, { cache }) => {
        const data = {
          activeobjects: [{ id, name, __typename: 'activeobject' }],
        }
        cache.writeQuery({ query, data })
        return null
      },
    },
  })

[barbalex]

This is the whole error:

Error: Network error: _this.inFlightRequestObservables[key].subscribe is not a function
    at new ApolloError (ApolloError.js:34)
    at ObservableQuery../node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.currentResult (ObservableQuery.js:87)
    at GraphQL.dataForChild (react-apollo.browser.umd.js:542)
    at GraphQL.render (react-apollo.browser.umd.js:592)
    at finishClassComponent (react-dom.development.js:7882)
    at updateClassComponent (react-dom.development.js:7859)
    at beginWork (react-dom.development.js:8233)
    at performUnitOfWork (react-dom.development.js:10215)
    at workLoop (react-dom.development.js:10279)
    at HTMLUnknownElement.callCallback (react-dom.development.js:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
    at invokeGuardedCallback (react-dom.development.js:436)
    at renderRoot (react-dom.development.js:10357)
    at performWorkOnRoot (react-dom.development.js:10963)
    at performWork (react-dom.development.js:10916)
    at requestWork (react-dom.development.js:10832)
    at scheduleWorkImpl (react-dom.development.js:10715)
    at scheduleWork (react-dom.development.js:10677)
    at Object.enqueueForceUpdate (react-dom.development.js:6222)
    at GraphQL../node_modules/react/cjs/react.development.js.Component.forceUpdate (react.development.js:244)
    at GraphQL.forceRenderChildren (react-apollo.browser.umd.js:510)
    at next (react-apollo.browser.umd.js:485)
    at Object.handleError [as error] (react-apollo.browser.umd.js:489)
    at SubscriptionObserver.error (zen-observable.js:174)
    at ObservableQuery.js:326
    at Array.forEach (<anonymous>)
    at Object.error (ObservableQuery.js:326)
    at QueryManager.js:283
    at QueryManager.js:661
    at Array.forEach (<anonymous>)
    at QueryManager.js:660
    at Map.forEach (<anonymous>)
    at QueryManager../node_modules/apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (QueryManager.js:655)
    at QueryManager.js:225
    at <anonymous>

[barbalex]

That did it. Thanks a lot!

As always, when nooby me uses something for the first time, there tend to be quite a number of open questions on the first attempt to get it working. That is why it is helpful when there is an example that completely covers a frequent use case. Every uncovered part means more loose ends for noobs that tend to trip over dumb errors as the one you pointed out.

Thanks a lot for this great project. Sorry that it is so great that it attracts bad noobs cause they feel that it is great enought to empower even them to program incredible stuff :-)