CODEWITHSUNDEEP
graphqlnuxt.jsvue-apollo
educob
educob

Reputation: 83

Nuxt. Trying to use apollo-graphql I get several errors that I didn't get with just vue

I have integrated apollo-graphql in vue (without nuxt)and it worked.

But now I am trying to start with Nuxt. In folder plugins I have included a js file with apollo initialization.

Then in a vue file I import the file with: import '~/plugins/apollo-client' (I got the idea from here: Apollo, GraphQL, Vue and Nuxt shenanigans )

I am getting plenty of errors like not being able to use localStorage. For that I have installed a package called npm i nuxt-storage.

But then at the split command:

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  }, 
  wsLink,
  httpLink,
)

I get this error: Cannot read property 'request' of null

I am afraid that I am going to be getting more errors after this one is solved.

What am I doing wrong?

Where should I place the code that I had in main.js?

Thanks.

Upvotes: 0

Views: 1901

Answers (1)

Emmanuel Neni
Emmanuel Neni

Reputation: 333

If you're not using nuxt-apollo, it should be better.

The error you got must have been due to the lack of step.

npm i @nuxtjs/apollo &&
npm install --save @nuxtjs/apollo
# if you are using *.gql or *.graphql files add graphql-tag to your dependencies 
npm install --save graphql-tag

  1. You'll need to set up your config as you've stated above,

    In nuxt.config.js:

    export default {
  ...
  modules: ['@nuxtjs/apollo'],
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu' //link to your graphql backend.
      }
    }
  }
}

  2. Make your query

    In gql/allCars.gql:

    {
  allCars {
    id
    make
    model
    year
  }
}

  3. Use graphql in your component

    In pages/index.vue:

    <script>
import allCars from '~/apollo/queries/allCars'
export default {
  apollo: {
    allCars: {
      prefetch: true,
      query: allCars
    }
  },
  head: {
    title: 'Cars with Apollo'
  }
}
</script>

Upvotes: 2

Related Questions