https://github.com/baianat/vue-gql

A small and fast GraphQL client for Vue.js
https://github.com/baianat/vue-gql

api api-client component component-library gql graphql graphql-client vue vuejs

Last synced: about 1 month ago
JSON representation

A small and fast GraphQL client for Vue.js

• Host: GitHub
• URL: https://github.com/baianat/vue-gql
• Owner: baianat
• License: mit
• Created: 2019-07-03T11:48:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T21:15:40.000Z (almost 2 years ago)
• Last Synced: 2024-09-28T21:22:48.358Z (about 2 months ago)
• Topics: api, api-client, component, component-library, gql, graphql, graphql-client, vue, vuejs
• Language: TypeScript
• Homepage: https://baianat.github.io/vue-gql/
• Size: 4.2 MB
• Stars: 34
• Watchers: 1
• Forks: 2
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-gql

A small and fast GraphQL client for Vue.js.



[![codecov](https://codecov.io/gh/baianat/vue-gql/branch/master/graph/badge.svg)](https://codecov.io/gh/baianat/vue-gql)

[![Build Status](https://travis-ci.org/baianat/vue-gql.svg?branch=master)](https://travis-ci.org/baianat/vue-gql)

[![Bundle Size](https://badgen.net/bundlephobia/minzip/vue-gql)](https://bundlephobia.com/[email protected])



## Features

- 📦 **Minimal:** Its all you need to query GQL APIs.

- 🦐 **Tiny:** Very small footprint.

- 🗄 **Caching:** Simple and convenient query caching by default.

- 💪 **TypeScript**: Written in Typescript.

- 💚 Minimal Vue.js Components.

## Documentation

You can find the full [documentation here](https://baianat.github.io/vue-gql)

## Quick Start

First install `vue-gql`:

```bash

yarn add vue-gql graphql

# or npm

npm install vue-gql graphql --save

```

Setup the GraphQL client/endpoint:

```js

import Vue from 'vue';

import { withProvider, createClient } from 'vue-gql';

import App from './App.vue'; // Your App Component

const client = createClient({

  url: 'http://localhost:3002/graphql'

});

// Wrap your app component with the provider component.

const AppWithGQL = withProvider(App, client);

new Vue({

  render: h => h(AppWithGQL)

}).$mount('#app');

```

Now you can use the `Query` and `Mutation` components to run queries:

```vue

  

    
Is Fetching ...

    


      
{{ data }}

    

  


import { Query } from 'vue-gql';

export default {

  components: {

    Query

  }

};

```

You can do a lot more, `vue-gql` makes frequent tasks such as re-fetching, caching, mutation responses, error handling, subscriptions a breeze. Consult the documentation for more use-cases and examples.

## Compatibility

This library relies on the `fetch` web API to run queries, you can use [`unfetch`](https://github.com/developit/unfetch) (client-side) or [`node-fetch`](https://www.npmjs.com/package/node-fetch) (server-side) to use as a polyfill.

## Examples

SOON

## License

MIT