Skip to content
The official Quasar App-Extension for Apollo and GraphQL - Currently Beta!
JavaScript
Branch: dev
Clone or download

Latest commit

Latest commit 0251722 Mar 13, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src updates package to be moved to @quasar and to beta Mar 9, 2020
.gitignore chore: Complete refactoring Feb 13, 2020
README.md docs: Document hooks Mar 13, 2020
package.json Updates Version Mar 9, 2020
yarn.lock feat: Add apollo client config file Feb 14, 2020

README.md

app-extension-apollo

official icon

Statements Branches Functions Lines
Statements Branches Functions Lines

This is the official Quasar App-Extension for adding GraphQL to your Quasar project.

Introduction

This app extension adds GraphQL support to your Quasar projects.

It uses Apollo Client and the Vue Apollo plugin.

Server side rendering (SSR) mode is also supported by this extension.

Installation

quasar ext add @quasar/apollo

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

Note: Some code will be added to the html template file of your app (src/index.template.html)

Prompts

You will be prompted to enter the URI of your GraphQL endpoint. You can skip this and instead provide the URI using an environment variable when running Quasar:

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.

Uninstall

quasar ext remove @quasar/apollo

Note: The added code to the html template file (src/index.template.html) will be removed.

Warning Added directory src/quasar-app-extension-apollo will be removed, if you need, make a backup before uninstalling the extension.

Configuration

Apollo client can be configured through src/quasar-app-extension-apollo/apollo-client-config.js.

For advanced configuration needs, the extension provides two hooks, one gets called before the apollo client instantiation and the other afterwards. The hooks are apolloClientBeforeCreate and apolloClientAfterCreate, and can be modified as needed in src/quasar-app-extension-apollo/apollo-client-hooks.js.

Usage

Check the guide in Vue Apollo docs

Example usage:

src/pages/Index.vue

<template>
  <q-page>
    <!-- when the query response is not received yet, data from it is undefined,
    so before referring to it we need to use v-if -->
    <div v-if="post">
      GraphQL query result:<br>{{ post.title }}
    </div>
    <div v-else>
      loading...
    </div>
  </q-page>
</template>

<script>
import gql from 'graphql-tag'

export default {
  name: 'PageIndex',

  // https://apollo.vuejs.org/guide/apollo/#usage-in-vue-components
  apollo: {
    post: {
      query: gql`query {
        post(id: 5) {
          title
        }
      }`
    }
  }
}
</script>

IMPORTANT: Needed to get vue-apollo's components to work (with Vue)

In order for the vue-apollo components to work, you must turn on a special transform so vue-loader doesn't fail on those new tags. Add the below code to the build property in your quasar.conf.js file.

  chainWebpack (chain, { isServer, isClient }) {
    chain.module.rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.transpileOptions = {
          transforms: {
            dangerousTaggedTemplateString: true
          }
        }
        return options
      })
  }
You can’t perform that action at this time.