query {
authors {
name
}
}
{
"data": {
"authors": [
{
"name": "Natalia"
}
]
}
}
query {
authors {
name
age
}
}
{
"data": {
"authors": [
{
"name": "Natalia",
"age": 35
}
]
}
}
type User {
name: String!;
age: Int;
}
type Comment {
title: String!;
author: User!;
}
Go to the graphql-server folder
Open http://localhost:4000/graphql in the browser
npm install --save vue-apollo graphql apollo-boost
yarn add vue-apollo graphql apollo-boost
// main.js
import Vue from 'vue'
import VueApollo from 'vue-apollo'
Vue.use(VueApollo)
// main.js
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
const httpLink = new HttpLink({
uri: 'http://localhost:4000/graphql'
})
const defaultClient = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
})
// main.js
const apolloProvider = new VueApollo({
defaultClient,
})
new Vue({
el: '#app',
apolloProvider,
render: h => h(App),
})
module.exports = {
chainWebpack: config => {
config.module
.rule('graphql')
.test(/\.(graphql|gql)$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end()
}
}
// apollo.config.js
module.exports = {
client: {
service: {
name: 'Wines',
url: 'http://localhost:4000/graphql'
},
includes: ['./src/**/*.gql']
}
}
// .graphqlconfig
{
"name": "Wines",
"extensions": {
"endpoints": {
"Default GraphQL Endpoint": {
"url": "http://localhost:4000/graphql",
"headers": {
"user-agent": "JS GraphQL"
},
"introspect": false
}
}
}
}
import allWinesQuery from '../graphql/allWines.query.gql'
...
apollo: {
allWines: {
query: ...,
}
},
import allWinesQuery from '../graphql/allWines.query.gql'
...
wines: {
query: allWinesQuery,
update(data) {
return data.allWines
},
},
apollo: {
wines: {
query: ...,
update(data) {...},
error(error) {
console.log(error)
}
}
}
// Global
v-if="$apollo.loading"
// For the certain query
v-if="$apollo.queries.wines.loading"
<ApolloQuery :query="require('../graphql/allWines.query.gql')">
<template v-slot="{ result: { error, data }, isLoading }">
...
</template>
</ApolloQuery>
// getWine.query.gql
query GetWine($id: ID!) {
getWine(id: $id) {
id
...
}
}
mutation AddWine($wine: WineInput!) {
addWine(wine: $wine) {
}
}
// wineShort.fragment.gql
fragment WineShort on Wine {
id
title
year
variety
}
#import './wineShort.fragment.gql'
query AllWines {
allWines {
...WineShort
}
}
this.$apollo
.mutate({
mutation: ...,
variables: ...,
update: (store, {data: {addWine}}) => {}
});
update: (store, { data: { addWine } }) => {
const data = store.readQuery({ query: allWinesQuery })
// CHANGE YOUR DATA HERE!
store.writeQuery({ query: allWinesQuery, data })
}
Wine.vue
deleteWine()
<ApolloMutation
:mutation="require('../graphql/addWine.mutation.gql')"
:update="updateCache"
@done="closeModal"
>
<template v-slot="{ mutate, loading, error }">
<WineForm
@submit="mutate({ variables: { wine: $event } })"
@cancel="closeModal"
/>
</template>
</ApolloMutation>
const wsLink = new WebSocketLink({
uri: 'ws://localhost:4000/graphql',
options: {
reconnect: true
}
})
//wineSub.subscription.gql
subscription WineSub {
wineSub {
...WineShort
}
}
subscribeToMore: {
document: wineSubscription,
updateQuery: (
previous,
{ subscriptionData: { data: { wineSub } } }
) => {
// CHANGE PREVIOUS STATE HERE
return previous
}
},
cache = new InMemoryCache()
cache.writeData({
data: {
favoriteWines: ['9X9d6n2r7']
}
})
extend type Query {
favoriteWines: [ID!]!
}
extend type Wine {
isInFavorites: Boolean
}
extend type Mutation {
addOrRemoveFromFavorites(id: ID!): [ID]
}
query FavoriteWines {
favoriteWines @client
}
query AllWines {
allWines {
...WineShort
isInFavorites @client
}
}
export const resolvers = {
Wine: {
isInFavorites: (wine, _, { cache }) => {
const { favoriteWines } = cache.readQuery({ query: getFavoriteWines })
return favoriteWines.includes(wine.id)
}
},
}
mutation ToggleFavorites($id: ID!) {
addOrRemoveFromFavorites(id: $id) @client
}
Mutation: {
addOrRemoveFromFavorites: (_, { id }, { cache }) => {
const { favoriteWines } = cache.readQuery({ query: getFavoriteWines })
const data = {
favoriteWines: favoriteWines.includes(id)
? favoriteWines.filter(i => i !== id)
: [...favoriteWines, id]
}
cache.writeQuery({ query: getFavoriteWines, data })
return data.favoriteWines
}
}
toggleFavorites() {
this.$apollo.mutate({
mutation: toggleFavoritesMutation,
variables: { id: this.wine.id },
refetchQueries: [{ query: allWinesQuery }]
})
}