@tranmani This is how I set up the Apollo Client in quasar. This may not be “best practice”.
My boot file: apolloclient.js
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import fetch from 'node-fetch'
import { createHttpLink } from 'apollo-link-http'
// import { createUploadLink } from 'apollo-upload-client'
const httpLink = createHttpLink({
// uri: "http://localhost:4000/graphql",
uri: `${process.env.API.BASE_URL}:${process.env.API.PORT}/graphql`,
fetch: fetch
})
/* const uploadLink = createUploadLink({
// uri: "http://localhost:4000/graphql",
uri: `${process.env.API.BASE_URL}:${process.env.API.PORT}/graphql`,
fetch: fetch
}) */
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
// link: uploadLink,
cache: new InMemoryCache(),
connectToDevTools: true,
defaultOptions: {
watchQuery: {
fetchPolicy: 'cache-and-network',
errorPolicy: 'ignore'
},
query: {
fetchPolicy: 'network-only',
errorPolicy: 'all'
},
mutate: {
errorPolicy: 'all'
}
}
})
const apolloProvider = new VueApollo({
defaultClient: apolloClient
/* errorHandler({ graphQLErrors, networkError }) {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
)
);
}
if (networkError) {
console.log(`[Network error]: ${networkError}`);
}
} */
})
export { apolloProvider }
Then a typical store file start with
import gql from 'graphql-tag'
import { apolloProvider } from 'boot/apolloClient'
import { Notify } from 'quasar'
const gqlClient = apolloProvider.defaultClientde_text
// typical action
async allRecordings ({ commit }, payload) {
console.log('action allRecordings', payload)
commit('SET_IS_LOADING', 1)
try {
const response = await gqlClient.query({
query: gql`
query AllScheduledRecordings(
$orderBy: [OrderByFields]
$filterBy: [FilterByFields]
$between: [BetweenFields]
$whereIn: [WhereInField]
$page: Page
) {
allScheduledRecordings(
orderBy: $orderBy
filterBy: $filterBy
between: $between
whereIn: $whereIn
page: $page
) {
oid
name
channelOid
recurrenceOid
channelName
filename
status
startTimeLocal
endTimeLocal
failureReason
eventDetails
landscapeUrl
posterUrl
logoUrl
videoFiles {
name
base
dir
ext
baseURL
}
}
}
`,
variables: {
...payload
}
})
console.log(response)
commit('SET_RECORDINGS', response.data)
commit('SET_IS_LOADING', -1)
} catch (error) {
Notify.create(`gqlClient action AllRecordings: ${error.message}`)
console.error('gqlClient action AllRecordings: ', error)
commit('SET_IS_LOADING', -1)
}
}
Hope this is of some help. I am assuming you have the appropriate Apollo Client dependences.