npm install --save vue@2.6.6 vue-template-compiler@2.6.6 vue-server-renderer@2.6.6

npm install --save @nuxtjs/apollo

yarn add @nuxtjs/apollo

// nuxt.config.jsexport default {  modules: [    '@nuxtjs/apollo',  ],  apollo: {    clientConfigs: {      default: {        httpEndpoint: 'http://localhost:4000',      }    }  }}

npm install --save graphql-tag

yarn add graphql-tag

declare module '*.gql' {  import { DocumentNode } from 'graphql'  const content: DocumentNode  export default content}declare module '*.graphql' {  import { DocumentNode } from 'graphql'  const content: DocumentNode  export default content}

{  // Add apollo module  modules: ['@nuxtjs/apollo'],  apollo: {    // Sets up the apollo client endpoints    clientConfigs: {      // recommended: use a file to declare the client configuration (see below for example)      default: '~/plugins/my-alternative-apollo-config.js',      // you can setup multiple clients with arbitrary names      alternativeClient: {        // required        httpEndpoint: 'http://localhost:4000',        // override HTTP endpoint in browser only        browserHttpEndpoint: '/graphql',        // 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: 'ws://localhost:4000',        // LocalStorage token        tokenName: 'apollo-token',        // Enable Automatic Query persisting with Apollo Engine        persisting: false,        // Use websockets for everything (no HTTP)        // You need to pass a `wsEndpoint` for this to work        websocketsOnly: false      },    },        /**     * default 'apollo' definition     */    defaultOptions: {      // See 'apollo' definition      // For example: default query options      $query: {        loadingKey: 'loading',        fetchPolicy: 'cache-and-network',      },    },        // setup a global query loader observer (see below for example)    watchLoading: '~/plugins/apollo-watch-loading-handler.js',        // setup a global error handler (see below for example)    errorHandler: '~/plugins/apollo-error-handler.js',    // Sets the authentication type for any authorized request.    authenticationType: 'Bearer',     // Token name for the cookie which will be set in case of authentication    tokenName: 'apollo-token',    // [deprecated] Enable the graphql-tag/loader to parse *.gql/*.graphql files    includeNodeModules: true,    // Cookie parameters used to store authentication token    cookieAttributes: {      /**        * Define when the cookie will be removed. Value can be a Number        * which will be interpreted as days from time of creation or a        * Date instance. If omitted, the cookie becomes a session cookie.        */      expires: 7,      /**        * Define the path where the cookie is available. Defaults to '/'        */      path: '/',      /**        * Define the domain where the cookie is available. Defaults to        * the domain of the page where the cookie was created.        */      domain: 'example.com',      /**        * A Boolean indicating if the cookie transmission requires a        * secure protocol (https). Defaults to false.        */      secure: false,    },  }}

// ~/plugins/my-alternative-apollo-config.jsexport default (context) => {  return {    httpEndpoint: 'http://localhost:4000/graphql-alt',    /*     * For permanent authentication provide `getAuth` function.     * The string returned will be used in all requests as authorization header     */    getAuth: () => 'Bearer my-static-token',  }}

// ~/plugins/apollo-watch-loading-handler.jsexport default (isLoading, countModifier, nuxtContext) => {  loading += countModifier  console.log('Global loading', loading, countModifier)}

// ~/plugins/apollo-error-handler.jsexport default ({ graphQLErrors, networkError, operation, forward }, nuxtContext) => {  console.log('Global error handler')  console.log(graphQLErrors, networkError, operation, forward)}

 // set your graphql-token this.$apolloHelpers.onLogin(token /* if not default you can pass in client as second argument, you can set custom cookies attributes object as the third argument, and you can skip reset store as the fourth argument */) // unset your graphql-token this.$apolloHelpers.onLogout(/* if not default you can pass in client as first argument, and you can skip reset store as the second argument */) // get your current token (we persist token in a cookie) this.$apolloHelpers.getToken(/* you can provide named tokenName if not 'apollo-token' */)

// ~/components/my-component.jsexport default {  methods: {    async onSubmit () {      const credentials = this.credentials      try {          const res = await this.$apollo.mutate({              mutation: authenticateUserGql,              variables: credentials          }).then(({data}) => data && data.authenticateUser)          await this.$apolloHelpers.onLogin(res.token)      } catch (e) {          console.error(e)      }    },  }}

// ~/components/my-component.jsexport default {  methods: {    async onLogout () {      await this.$apolloHelpers.onLogout()    },  }}

// ~/middleware/isAuth.jsexport default ({app, error}) => {  const hasToken = !!app.$apolloHelpers.getToken()  if (!hasToken) {    error({      errorCode:503,       message:'You are not allowed to see this'    })  }}

// ~/store/my-store.jsexport default {  actions: {    foo (store, payload) {      let client = this.app.apolloProvider.defaultClient    }  }}

// ~/components/my-component.jsexport default {  asyncData (context) {    let client = context.app.apolloProvider.defaultClient  }}

export default {  nuxtServerInit (store, context) {    let client = context.app.apolloProvider.defaultClient  }}

// ~/components/my-component.jsexport default {  methods: {    foo () {      // receive the associated Apollo client       const client = this.$apollo.getClient()      // most likely you would call mutations like following:      this.$apollo.mutate({mutation, variables})            // but you could also call queries like this:      this.$apollo.query({query, variables})        .then(({ data }) => {          // do what you want with data        })    }  }}

// nuxt.config.jsexport default {  apollo: {    foo: {      query: fooGql,      variables () {        return {          myVar: this.myVar        }      }    }  }}

// nuxt.config.jsexport default {  apollo: {    clientConfigs: {      default: '~/apollo/client-configs/default.js'    },    includeNodeModules: true  }}

// nuxt.config.jsexport default {  apollo: {    clientConfigs: {      default:{        httpEndpoint: YOUR_ENDPOINT,        wsEndpoint: YOUR_WS_ENDPOINT      }    }  }}

# cat .envHTTP_ENDPOINT=https://your-endpointWS_ENDPOINT=wss://your-endpoint

mutation authenticateUser($email:String!,$password:String!){    authenticateUser(email: $email, password: $password) {        token        id    }}

npm installnpm run dev