Prefetch in apollo queries works in pages i.e. routes in NuxtJS but doesnot work in Components!!
Is there solution for this???

I am using Nuxt version1.0.0
@dohomi

Hi there,

I am using Nuxt with Docker. My Nuxt app calls an API from a server that is started on another container. I pass the api url via environment variables defined in docker-compose.yml. On server side this works quite fine, on client side I am getting OPTIONS http://server:4000/graphql net::ERR_NAME_NOT_RESOLVED.

This is my docker-compose.yml:

version: "3.7"
services:
  frontend:
    container_name: frontend
    image: node
    restart: unless-stopped
    command: npm run docker
    volumes:
      - ./frontend:/usr/src/app
      - ~/.ssh:/root/.ssh:ro
    working_dir: /usr/src/app
    ports:
      - "3000:3000"
    environment:
      NUXT_HOST: 0.0.0.0
      VUE_APP_GRAPHQL_HTTP: 'http://server:4000/graphql'
      VUE_APP_GRAPHQL_WS: 'ws://server:4000/graphql'
    depends_on:
      - server
    networks:
      - app

  server:
    container_name: server
    image: node
    restart: unless-stopped
    command: npm run docker
    volumes:
      - ./server:/usr/src/app
      - ~/.ssh:/root/.ssh:ro
    working_dir: /usr/src/app
    ports:
      - "4000:4000"
    depends_on:
      - database
    environment:
      PORT: 4000
      DATABASE_URL: mongodb://database:27017
    networks:
      - app

  database:
    container_name: database
    image: mongo
    volumes:
      - ./data:/data/db
    ports:
      - "27017:27017"
    networks:
      - app

networks:
  app:

The apollo config in nuxt:

apollo: {
    tokenName: 'app',
    includeNodeModules: true,
    errorHandler(error) {
      console.log(
          '%cError',
          'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;',
          error.message
      );
    },
    clientConfigs: {
      default: {
        httpEndpoint: process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql',
        httpLinkOptions: {
          credentials: 'same-origin',
        },
      },
    },
  },

My first guess was to use nuxt proxy module like this:

apollo: {
    tokenName: 'app',
    includeNodeModules: true,
    errorHandler(error) {
      console.log(
          '%cError',
          'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;',
          error.message
      );
    },
    clientConfigs: {
      default: {
        httpEndpoint: '/api',
        httpLinkOptions: {
          credentials: 'same-origin',
        },
      },
    },
  },
  proxy: {
    '/api': process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql',
  },

but then I can't even start my nuxt app with the error [Apollo module] Client configuration "default" must define httpEndpoint or link option..

Can anybody tell me if I have to use nuxt proxy to solve this and how I can use the proxy with apollo-module? Maybe my setup is also completely wrong.

Cheers

I've setup a new nuxt project with vue-apollo and @nuxt/apollo.

However I am receiving the error:

Invariant Violation
Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql

Reproduction

As mentioned it is a fresh project.

• yarn create nuxt-app frontend
• cd frontend && yarn add @nuxtjs/apollo graphql-tag

  modules: ['@nuxtjs/apollo'],

  /**
   * Apollo Configuration
   */
  apollo: {
    clientConfigs: {
      default: '~/apollo/client/index.js'
    }
  },

export default function(context) {
  return {
    httpEndpoint: process.env.NODE_ENV === 'development' ? endpoint : endpoint,
    httpLinkOptions: {
      credentials: 'include'
    }
  }
}

 "dependencies": {
    "@nuxtjs/apollo": "^4.0.0-rc4",
    "cross-env": "^5.2.0",
    "dotenv": "^7.0.0",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.10.1",
    "nuxt": "^2.4.0"
  },

Now I've tried different approaches. But all result in the same error.

1. GQL Files

courses.gql

query courses {
  courses {
    id
    name
    description
  }
}

1. Javascript files

import gql from 'graphql-tag'

export const ALL_COURSES_QUERY = gql`
  query courses {
    courses {
      id
      name
      description
    }
  }
`

Example page:

I've tried to use gql files, the javascript files and inline with like here:

<template>
  <div>
    <h1>Here are all available courses</h1>
    <h2 v-if="loading">Loading</h2>
    <ul v-else>
      <li v-for="course in courses" :key="course.id">
        {{ course.name }} - {{ course.description }}
      </li>
    </ul>
  </div>
</template>

<script>

/* eslint-disable */
import { ALL_COURSES_QUERY } from '~/apollo/queries'
import courses from '~/apollo/queries/courses.gql'

import gql from 'graphql-tag'

export default {
  name: 'CourseList',
  data: () => ({
    courses: null,
    loading: 0
  }),
  mounted() {
    console.log(ALL_COURSES_QUERY)
  },
  apollo: {
    courses: {
      query: gql` query courses {
               courses { id, name, description }
             }`
    },
    loadingKey: 'loading'
  }
}
</script>

However nothing works.

Version

v4.0.0-rc.4

Reproduction link

https://github.com/Berkmann18/nuxty

Steps to reproduce

1. Follow this tutorial (up to the point where you run npm run generate or npm run dev).
2. See the output on the CLI.

What is expected ?

No errors.

What is actually happening?

%cError background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold; Network error: Response not successful: Received status code 401
/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:63
     throw e;
     ^
TypeError: Cannot read property 'delete' of undefined
    at /mnt/c/Users/max/Projects/nuxty/node_modules/apollo-link-dedup/lib/dedupLink.js:48:47
    at cleanupSubscription (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:90:7)
    at notifySubscription (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:145:41)
    at onNotify (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:165:3)
    at SubscriptionObserver.error (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:224:7)
    at /mnt/c/Users/max/Projects/nuxty/node_modules/apollo-link-dedup/lib/dedupLink.js:42:81
    at Set.forEach (<anonymous>)
    at Object.error (/mnt/c/Users/max/Projects/nuxty/node_modules/apollo-link-dedup/lib/dedupLink.js:42:45)
    at notifySubscription (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:134:18)
    at onNotify (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:165:3)
    at SubscriptionObserver.error (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:224:7)
    at notifySubscription (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:134:18)
    at onNotify (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:165:3)
    at SubscriptionObserver.error (/mnt/c/Users/max/Projects/nuxty/node_modules/zen-observable/lib/Observable.js:224:7)
    at /mnt/c/Users/max/Projects/nuxty/node_modules/apollo-upload-client/lib/index.js:104:20
    at process.internalTickCallback (internal/process/next_tick.js:77:7)

I've created a graphql backend that I want to use with Nuxt and am having some issues hooking them up. I'm able to run any queries/mutations that don't involve a token but as soon as a token is required, my backend yells at me for not being authenticated. My backend sends a jwt token in an Authorization header with the "Bearer authentication scheme.

I initially had the apollohelpers method which I think did most of the heavy lifting but for some reason, crashed the app on reload every time there was a token in the cache and also, I had set my JWT token to expire within 30minutes but using the helpers somehow had overridden it with its default value and I couldn't seem to fix these issues so I opted away from it for now.

Anyways heres my nuxt.config.js:

  module.exports = {
   ...
    /* ** Apollo config */
    apollo: {
      errorHandler(error) {
        console.log(
          "%cError",
          "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
          error.message
        )
      },
      clientConfigs: {
        default: "~/plugins/apollo-client.js"
      }
    }

and the plugin/apollo-client.js

import { InMemoryCache } from "apollo-cache-inmemory"
import { persistCache } from "apollo-cache-persist"

const cache = new InMemoryCache()

if (process.browser) {
  try {
    persistCache({
      cache,
      storage: window.localStorage
    })
  } catch (error) {
    console.error("Error restoring Apollo cache", error)
  }
}
const clientState = {
  // Set default values for local state.
  defaults: {
    isAuthenticated: false,
    test: "this is my test"
  },
}
export default function() {
  return {
    cache,
    clientState,
    httpEndpoint: "http://localhost:4000/graphql",
    httpLinkOptions: {
      credentials: "same-origin"
    }
  }
}

I've also tried under the Header section of the apollo client docs creating an authLink unsuccessfully. This most likely isn't an actual bug, but something I'm just struggling to get working on my own.

Hi,
I'm trying to use the head() method to set the html title tag with data returned from apollo. I'm trying to use asyncData to make the query:

  asyncData: (context) ->
    client = context.app.apolloProvider.defaultClient
    data = await client.query({
          query: getItem,
          variables: { id: 1 }
        })

(sorry, coffeescript)

but am getting the following error:

Network error: window is not defined

I'm on "@nuxtjs/apollo": "^4.0.0-rc4"

Any thoughts? TIA!
Billy

link to create questions does not work

Mixed Content: The page at 'https://ilya-blog.herokuapp.com/' was loaded over HTTPS, but requested an insecure resource 'http://ilya-blog-backend.herokuapp.com/graphql'. This request has been blocked; the content must be served over HTTPS.

I know to fix the error I need to replace "http" with "https", but the problem is that this does not help.

I googled the entire Internet and really do not know what the reason.

Error start appears when I moved the site to the heroku.

I am 100% sure that it is used "https". Tell me something, or else I'm stumped.

The only relatable link in README seems to be dead.
https://github.com/apollographql/apollo-client/blob/master/Upgrade.md

since you are already using prefetch, you should move it into fetch function where you get error function from context object and use it to properly handle the error

This module is working smoothly on a couple of projects (one production, one simple dev) as far as the Mutations and Queries are concerned but now I want to implement Real-time results using Subscriptions and have followed official docs, Medium post. Every thing works fine without breaking anything but without result too. Below is my minimal implementation: @dohomi am I missing something?

Thanks.

apollo-config.js (plugin)

import { InMemoryCache } from 'apollo-cache-inmemory'

const cache = new InMemoryCache()

export default function (ctx) {
  let httpEndpoint = 'http://localhost:3000/graphql'

  return {
    httpEndpoint,
    wsEndpoint: 'ws://localhost:3000/graphql',
    cache
  }
}

schema.js

const { gql } = require('apollo-server-express');

const typeDefs = gql`
  type Query {
    hello: String
  }

  type Mutation {
    newComment(content: String!): Comment,
  }

  type Subscription {
    commentAdded: Comment
  }

  type Comment {
    id: Int,
    content: String,
  }
`;

module.exports = typeDefs

resolver.js

const { Comment} = require('../../models');
const { PubSub } = require('graphql-subscriptions');

const COMMENT_ADDED = 'commentAdded';

const pubsub = new PubSub();

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    async newComment(root, args) {
      const comment = await Comment.create(args)
      await pubsub.publish(COMMENT_ADDED, { 'newComment': comment });
      return comment
        }
  },
  Subscription: {
    commentAdded: {
      subscribe: () => pubsub.asyncIterator('commentAdded')
    }
  },
};

module.exports = resolvers

commentAdded.gql

subscription commentAdded {
  commentAdded {
    id
    content
  }
}

ApolloServer.js

const { ApolloServer } = require('apollo-server-express');
const typeDefs = require('./schema');
const resolvers = require('./resolver');
const apollo = new ApolloServer({
  typeDefs,
  resolvers,
});

module.exports = apollo

index.vue

<template>
  <section class="container">
    {{ hello }}
  </section>
</template>

<script>
import hello from '@/graphql/Queries/hello.gql';
import COMMENT_ADDED from '@/graphql/Subscriptions/newComment.gql'
export default {
  apollo: {
    hello: {
      prefetch: true,
      query () {
        return hello
      }
    },
    $subscribe: {
      commentAdded: {
        query: COMMENT_ADDED,
        result (data) {
          console.log('comment listening', data)
        }
      }
    }
  },
}
</script>

main.js

const { createServer } = require('http');
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')

const apollo = require('../graphql/Apollo/server.js')

const app = express()

const httpServer = createServer(app);

apollo.applyMiddleware({ app });
apollo.installSubscriptionHandlers(httpServer);

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const {
    host = process.env.HOST || 'localhost',
    port = process.env.PORT || 3000
  } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  httpServer.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

Result

Version

v4.0.0-rc.4

Reproduction link

https://graphnewreader-uqpacjfhny.now.sh

Steps to reproduce

Click one of the link for second page.
Click the second button.
New query load.

link to git: https://gitlab.com/yaki4/grapheader.git

What is expected ?

New query use new store value in headers.

What is actually happening?

New query doesn't use new store value in headers.

Additional comments?

I already fill a bug report for this one. But the update doesn't resolve this issue.

Version

v4.0.0-rc.4

Reproduction link

https://graphnewreader-uqpacjfhny.now.sh

Steps to reproduce

Click one of the link.
The page load with data.
Reload the page.

link for git: https://gitlab.com/yaki4/grapheader.git

What is expected ?

Page load and display data.

What is actually happening?

The second and third page with apollo query load forever.

Additional comments?

You can fin in package.json the requirement for vue, vue-template-compiler and vue-server-renderer.
I try remove and rebuilt yarn.lock without success

Hey there,

how can I query data asynchronously?
(I am using v4.0.0-rc.4)

This query is working fine:

import news from '@/apollo/queries/news'

export default {
  apollo: {
      newsList: {
        query: news,
        prefetch: true,
        variables: { limit: 4 },
      }
   }
}

But when the page is not loaded directly but called with a <nuxt-link>, the data is not ready which results in a undefined object.

So I tried to use asyncData:

import news from '@/apollo/queries/news'

export default {
  asyncData(context) {
    return context.app.apolloProvider.defaultClient.query({
      query: news,
      prefetch: true,
      variables: { limit: 4 },
    }).then((newsList) => {
      return {newsList: newsList.data.newsList}
    })
  }
}

Which also works fine when the page is loaded directly, but throws the error: GraphQL error: Syntax Error GraphQL (1:1) Unexpected <EOF> 1: ^ when called with a <nuxt-link>.
I assume it can't find the qgl file, but how can I preload it? Or is there a other / better way to achieve this?

Tanks in advance! :)

https://github.com/nuxt-community/apollo-module/blob/master/test/fixture-multi-endpoints/nuxt.config.js

clientConfigs: {
      default: {
        httpEndpoint: process.env.HTTP_ENDPOINT,
        wsEndpoint: process.env.WS_ENDPOINT,
        getAuth: () => 'Bearer 1234'
      },
      second: {
        httpEndpoint: process.env.HTTP_ENDPOINT,
        wsEndpoint: null
      }
    }

How can I switch client between default and second ?

@kieusonlam @kevinmarrec could you guys try the current master branch? I merged the potential update but now the SSR client/server hydration breaks.
There must be some missing pieces. If you check out this repo and run dev,dev2,dev3 and open the console you will find the hydration error.
@Akryum could you maybe have a look what is missing with the most recent Vue 2.6.6 and vue-apollo as dependencies? Thanks!

Is there any particular reason two lockfiles are included? yarn prints the following warning on install:

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

Version

v4.0.0-rc.3

Reproduction link

https://grapheader-nmsrtiwlue.now.sh/

Steps to reproduce

Increment value in store with one of the two buttons.
The first one will refetch the first query and the second one will execute the second query.

What is expected ?

Apollo client use updated store value.

What is actually happening?

Apollo client use old store value.
I have to reload my window to use the new client.

Additional comments?

The first time i had this bug was with i18n, my headers was not set correctly with the new lang.
You can find a repo here https://gitlab.com/yaki4/grapheader.git

I used the store to pass specific header in my application. But, when i update the value my apollo client still use the old value.

I first notice this bug with i18n when i change language but i have this bug with a simple value change in store.
You can check a repo here and a test project there .
If you watch your network in debug tools you will see that the request headers are still the same for a new or a refetch query.