Apollo/GraphQL integration for VueJS
Questions tagged [vue-apollo]
339 questions
22
votes
1 answer
"Default Apollo Queries" VS "AsyncData" (Nuxt.js)
I'm building a site with Nuxt/Vue, and it's using a GraphQL backend API. We access this using the Apollo module for Nuxt.
In a page component, you can do this (I think this is called a Smart Query, but I'm not sure):
apollo: {
pages: {
query:…

Drew Baker
- 14,154
- 15
- 58
- 97
14
votes
1 answer
Apollo - update() method getting called twice, both times with optimistic/fake data
I'm completely stuck on an Apollo problem, for which I've opened a GitHub issue and had zero response on.
I'm calling an Apollo mutation, using optimisticResponse. The way it's supposed to work, as I understand it, is that update() gets called…

ffxsam
- 26,428
- 32
- 94
- 144
11
votes
1 answer
Why WebStorm show errors in gql query inside apollo object in Vue component or .grapgql files
I have a problem with WebStorm syntax highlighting. I created valid GraphQL query which works on localhost app but WebStorm says that
unknown field "familyMembers" on object type "Query"
and highlights the whole query in red.
I am really confused…

Krzysztof Kaczyński
- 4,412
- 6
- 28
- 51
11
votes
3 answers
How can I access this.$route from within vue-apollo?
I'm constructing a GraphQL query using vue-apollo and graphql-tag.
If I hardcode the ID I want, it works, but I'd like to pass the current route ID to Vue Apollo as a variable.
Does work (hardcoded ID):
apollo: {
Property: {
query:…

Michael Giovanni Pumo
- 14,338
- 18
- 91
- 140
10
votes
2 answers
how to use enum in apollo-client?
the enum define in OrderTypesEnum.gql
enum OrderTypes {
full_buy
pink_buy
}
import OrderTypesEnum.gql file
import OrderTypes from '@/graphql/OrderTypesEnum.gql'`
but, How to get enum in code ?
I use OrderTypes.full_buy get some error:
…

lidashuang
- 1,975
- 4
- 20
- 22
10
votes
3 answers
Nuxt JS Apollo data only available after page refresh
I am fetching some data using Apollo inside of Nuxt. Somehow, when navigating to that page I get an error of
Cannot read property 'image' of undefined
When I refresh the page, everything works as expected.
I have a found a few threads of people…

Martin Conde
- 345
- 3
- 15
9
votes
3 answers
I am using vue 3 with apollo/client but getting an error
I am using vue 3 with composition api with apollo/client . I did everything from documentation but this is as far I could go.I provied a correct backend url and just cant figure it out.This is my code and I get a warning in the terminal
warning in…

usman mughal
- 189
- 1
- 3
- 7
9
votes
1 answer
What is the lifecycle of vue apollo subscriptions?
Does vue-apollo automatically unsubscribe the query when the View changes?
For example, I have two views routed to /users and /orders. /users has a subscription to the users table and /orders has a subscription to the orders table.
If I were on the…

zcaudate
- 13,998
- 7
- 64
- 124
9
votes
1 answer
How to access '$apollo' outside vue component?
How to make apollo accessible outside vue component.
I am verifying if the user exist and then allow the route to proceed further.
{
path: '/:username',
name: 'userProfilePage',
component: userProfilePage,
…

Yashu Mittal
- 1,478
- 3
- 14
- 32
7
votes
0 answers
How are prefetch smart queries in vue-apollo and nuxt supposed to work?
I'm currently working on a project where I'm using nuxt, vue-apollo, and the nuxt apollo-module that wraps vue-apollo and integrates it into nuxt.
I have a fairly straightforward smart query defined in my page:
-
Zachary Wright
- 23,480
- 10
- 42
- 56
7
votes
2 answers
How to handle Apollo Graphql query error in Vue.JS?
I am using Vue.js with Vue-Apollo and trying to fetch shared member list using query. I am using the graphQL service in backend.
I am using apollo 'error' function to handle GraphQL error. When the request is made with invalid input, I can see the…

khushbu patel
- 105
- 1
- 8
7
votes
2 answers
"export 'createNetworkInterface' was not found in 'apollo-client'
I did this sample: https://github.com/Akryum/vueconf-2017-demo
As a result, I have the same file in my project: https://github.com/Akryum/vueconf-2017-demo/blob/master/src/apollo-client.js
This is the code used in my application:
import {…

Colibri
- 993
- 11
- 29
6
votes
1 answer
How to use imported graphql files in jest unit testing?
I'm trying to run unit tests with jest but I'm getting the following error:
● Test suite failed to run
/apollo/queries/articles.gql:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){query…

Mitch M
- 157
- 11
6
votes
1 answer
ApolloBoost was initialized with unsupported options:
I'm trying to disable cache on Apollo, therefore I'm following the documentation apollo-client
, but I cannot success, I get all the time this warning ApolloBoost was initialized with unsupported options: defaultOptions
Does anyone have the same…

Kaiser91
- 333
- 6
- 17
6
votes
1 answer
How to use in a project that is setup using Vue CLI@3 and TypeScript?
td;dr
How do I include vue-apollo in a project that already uses TypeScript?
I created a fresh vue project using vue cli@3 and using TS.
Then I added the vue-apollo plugin which modified my main.ts file to add
apolloProvider: createProvider(),
in…

Praveen Puglia
- 5,577
- 5
- 34
- 68