Apollo-module: Example project for apolllo-link-state with nuxt

Created on 30 Jul 2018  路  4Comments  路  Source: nuxt-community/apollo-module

What problem does this feature solve?

Docs/config for setting up apollo-link-state with nuxt

This feature request is available on Nuxt community (#c122)
feature-request

Most helpful comment

I tried to get your repository to work but several missing dependency errors came up. I'm currently trying to figure out how to make clientState work in combination with an external GQL endpoint but apollo dev tools is not picking up on the schema:

clientConfigs: {
      default: {
        httpEndpoint: 'https://someexternalgql.com'
      },
      local: {
        httpEndpoint: 'http://localhost:4000', // not used but needed?
        typeDefs: localSchema,
        resolvers: localResolvers,
        onCacheInit: cache => {
          const data = {
            connected: false
          }
          cache.writeData({ data })
        }
      }
    }

I also tried putting all config in local.clientState but that doesn't work either and gives clientState property has been deprecated notice.

Any examples on how to mix local and remote schema's? Would appreciate any help! UPDATE: most examples i've found of how to work with client state and nuxt apollo module seem to be outdated, using either the clientState key and the required httpEndpoint where dev tools will try to connect to but won't be able to access, or other examples by importing { withClientState } from 'apollo-link-state' but this does not seem to work/to be outdated.

All 4 comments

I have an example repo demonstrating this: https://github.com/ameistad/nuxt-apollo-link-state

Also, check out my blog post describing the steps.

I will try to make a PR in the near future.

I tried to get your repository to work but several missing dependency errors came up. I'm currently trying to figure out how to make clientState work in combination with an external GQL endpoint but apollo dev tools is not picking up on the schema:

clientConfigs: {
      default: {
        httpEndpoint: 'https://someexternalgql.com'
      },
      local: {
        httpEndpoint: 'http://localhost:4000', // not used but needed?
        typeDefs: localSchema,
        resolvers: localResolvers,
        onCacheInit: cache => {
          const data = {
            connected: false
          }
          cache.writeData({ data })
        }
      }
    }

I also tried putting all config in local.clientState but that doesn't work either and gives clientState property has been deprecated notice.

Any examples on how to mix local and remote schema's? Would appreciate any help! UPDATE: most examples i've found of how to work with client state and nuxt apollo module seem to be outdated, using either the clientState key and the required httpEndpoint where dev tools will try to connect to but won't be able to access, or other examples by importing { withClientState } from 'apollo-link-state' but this does not seem to work/to be outdated.

I was able to get this working by using the typeDefs and resolvers parameters in my default client
`import gql from 'graphql-tag'
import { resolvers } from './local'

export default (context) => {
return {
// required
httpEndpoint: process.env.GRAPHQL_HTTP,
// optional
// See https://www.apollographql.com/docs/link/links/http.html#options
httpLinkOptions: {
credentials: 'same-origin',
},
// You can use wss for secure connection (recommended in production)
// Use null to disable subscriptions
wsEndpoint: context.isDev ? null : process.env.GRAPHQL_WS, // optional
// LocalStorage token
tokenName: 'apollo-token', // optional
// Enable Automatic Query persisting with Apollo Engine
persisting: false, // Optional
// Use websockets for everything (no HTTP)
// You need to pass a wsEndpoint for this to work
websocketsOnly: false, // Optional
resolvers: resolvers,
typeDefs: gql type Query { hello: String } ,
}
}
`

Here is the local state example if anyone interest: https://github.com/nuxt-community/apollo-module/tree/master/test/fixture-local-state

I'll close this for now.

Was this page helpful?
0 / 5 - 0 ratings