vue-cli-plugin-apollo

🚀 Start building a Vue app with Apollo and GraphQL in 2 minutes!

This is a vue-cli 3.x plugin to add Apollo and GraphQL in your Vue project.

⭐ Features:

Automatically integrate vue-apollo into your Vue app
Included optional Graphql API Server:
- Dead simple GraphQL API sources generated into your project
- Upgradable service running apollo-server
- Websocket subscriptions support
- Optional automatic mocking
- Optional Apollo Engine support
Included example component with:
- Watched query
- Mutation
- Realtime subscription using Websockets

Getting started

⚠️ Make sure you have vue-cli 3.x.x:

vue --version

If you don't have a project created with vue-cli 3.x yet:

vue create my-new-app

Add the cli plugin:

vue add apollo

ℹ️ An example ApolloExample.vue component alongside some GraphQL query files will be added into your sources.

Start your app:

npm run serve

Read the vue-apollo doc.

GraphQL API Server

If you enabled the GraphQL API Server, open a new terminal and start it:

npm run graphql-api

You can edit the files generated in the ./src/graphql-api folder:

type-defs.js contains the Schema written with the schema definition language.
resolvers.js declares the Apollo resolvers.
context.js allows injecting a context object into all the resolvers (third argument).
mocks.js defines the custom resolvers used for mocking (more info).

The server will be automatically restarted when a change is detected.

To run the server only once, use this command:

npm run run-graphql-api

Updating vue-cli-plugin-apollo will also update the GraphQL Server service 👍

Mocks

You can enable automatic mocking on the GraphQL API Server. It can be customized in the ./src/graphql-api/mocks.js file generated in your project.

Apollo Engine

Apollo Engine is a commercial product from Apollo. It enables lots of additional features like monitoring, error reporting, caching and query persisting.

Create a key at https://engine.apollographql.com (it's free!).

Injected Commands

vue-cli-service graphql-api

Run the GraphQL API server with info from ./src/graphql-api and watch the files to restart itself automatically.
vue-cli-service run-graphql-api

Run the GraphQL API server with info from ./src/graphql-api once.
vue-cli-service prod-graphql-api

Run the GraphQL API server with info from ./src/graphql-api once in production mode.

Configuration

The GraphQL API Server can be configured via the pluginOptions in vue.config.js:

module.exports = {
  // Other options...
  pluginOptions: {
    // Enable automatic mocking
    graphqlMock: true,
    // Enable Apollo Engine
    apolloEngine: true,
  },
}

Env variables

VUE_APP_GRAPHQL_ENDPOINT

The url to the graphql host, default: http://localhost:4000
VUE_APP_GRAPHQL_PATH

Url path to the graphql server query handler, default: '/graphql'
VUE_APP_GRAPHQL_SUBSCRIPTIONS_PATH

Url path to the graphql server subscription handler (websockets), default: '/graphql'

With the GraphQL server enabled

VUE_APP_GRAPHQL_PORT

Port of the GraphQL API Server, default: 4000
VUE_APP_APOLLO_ENGINE_KEY

API key for Apollo Engine
VUE_APP_GRAPHQL_PLAYGROUND_PATH

Url path to the graphql server playground, default: '/'
VUE_APP_GRAPHQL_CORS

Cors rules, default: '*'

BasKiers/vue-cli-plugin-apollo