app-extension-apollo

Introduction

This is the official Quasar app extension for adding GraphQL to your Quasar
project.

This AE uses Apollo Client and Vue Apollo.

Installation

``sh
quasar ext add @quasar/apollo
`

NOTE: As of 2.1.0-beta.1, version 2 is now in the dev and default branch of the repository. It is also the version you'll get with the "normal" @quasar/apollo package. No need to use @next tag anymore.

IMPORTANT Since version 2.2.0-beta.2 we externalized all deps for this AE: graphql, graphql-tag, @apollo/client and @vue/apollo-composable. If you installed a previous version, rerun quasar ext add @quasar/apollo command to have compatible deps added to your project's package.json.

Version 1 has been deprecated and is no longer supported. If you wish to use it, you can install it with @quasar/apollo@1.0.0-beta.8.

Quasar CLI will retrieve the extension from NPM
(@quasar/quasar-app-extension-apollo)

The extension will add a configuration file into src/apollo and a boot file.

Config File Entry

IMPORTANT You'll need to manually register the boot file in quasar.conf.js > boot.

Like so:
`js
export default configure((/ ctx /) => {
return {
boot: [
'apollo'
],
// ....
}
`

$3

You will be prompted if you wish to use GraphQL subscriptions, if you
answer yes, you will be prompted which subscription transport you wish to use. Available options are:

- Web Socket (graphql-ws)
- SSE (Server-Sent Events) (graphql-sse)

After selecting the transport, the necessary dependencies will be installed and the initialization code
will be scaffolded for you.

Uninstall

`sh
quasar ext remove @quasar/apollo
`

You might also wish to remove the added directory src/apollo and related boot file.

Apollo client options

Apollo client options can be customized in
src/apollo/index.(ts|js).

You will need either to set the GraphQL endpoint in it, or set it as an
environment variable before running Quasar:

`sh
GRAPHQL_URI=https://prod.example.com/graphql quasar build
GRAPHQL_URI=https://dev.example.com/graphql quasar dev
`

If you don't have a GraphQL endpoint yet, you can create one to experiment
with at FakeQL or other similar services.

If you are using GraphQL subscriptions, you will also need to set the
WebSocket endpoint as an environment variable:

`sh
GRAPHQL_URI=https://prod.example.com/graphql GRAPHQL_WS_URI=wss://prod.example.com/graphql quasar build
GRAPHQL_URI=https://dev.example.com/graphql GRAPHQL_WS_URI=wss://dev.example.com/graphql quasar dev
`

You can use dotenv in quasar.config file
to set these environment variables in a more convenient way, if you wish.

Usage

Check the guide in Vue Apollo docs.

Example usage:

src/pages/Index.vue

`html