Installation
Compatibility
- Vue 3
- Apollo Client 3
Note: @vue/apollo-composable
supports Vue 2 thanks to Vue Demi.
Vue CLI Plugin
⚠️ The plugin is not updated to support the new packages yet.
Manual installation
shell
npm install --save graphql graphql-tag @apollo/client
Or:
shell
yarn add graphql graphql-tag @apollo/client
In your app, create an ApolloClient
instance:
js
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
// HTTP connection to the API
const httpLink = createHttpLink({
// You should use an absolute URL here
uri: 'http://localhost:3020/graphql',
})
// Cache implementation
const cache = new InMemoryCache()
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
Continue installation in Next Steps.
IDE integration
Visual Studio Code
If you are using VS Code, it's recommended to install the Apollo GraphQL extension.
Then configure it by creating a apollo.config.js
file in the root folder of the Vue project:
js
// apollo.config.js
module.exports = {
client: {
service: {
name: 'my-app',
// URL to the GraphQL API
url: 'http://localhost:3000/graphql',
},
// Files processed by the extension
includes: [
'src/**/*.vue',
'src/**/*.js',
],
},
}
Webstorm
If you are using Webstorm, it's recommended to install the JS GraphQL extension.
Then configure it by creating a .graphqlconfig
file in the root folder of the Vue project:
json
{
"name": "Untitled GraphQL Schema",
"schemaPath": "./path/to/schema.graphql",
"extensions": {
"endpoints": {
"Default GraphQL Endpoint": {
"url": "http://url/to/the/graphql/api",
"headers": {
"user-agent": "JS GraphQL"
},
"introspect": false
}
}
}
}
Next steps
Continue with one of those guides: