https://github.com/auritylab/vue-graphql-inject
A simple way to use your GraphQL operations in a type-safe way with Vue!
https://github.com/auritylab/vue-graphql-inject
Last synced: 11 months ago
JSON representation
A simple way to use your GraphQL operations in a type-safe way with Vue!
- Host: GitHub
- URL: https://github.com/auritylab/vue-graphql-inject
- Owner: AurityLab
- License: apache-2.0
- Created: 2019-06-02T16:40:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T05:02:16.000Z (almost 3 years ago)
- Last Synced: 2023-12-25T19:02:03.411Z (about 2 years ago)
- Language: TypeScript
- Homepage:
- Size: 452 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue GraphQL Inject
[](https://www.npmjs.com/package/vue-graphql-inject)
[](https://www.npmjs.com/package/vue-graphql-inject)
A simple way to use your GraphQL operations in a type-safe way with Vue!
It uses [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator) to generate the types.
### Quick start
This package requires [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator). If you haven't already, install it and create a new config.
[Here](https://github.com/dotansimha/graphql-code-generator#quick-start) is a guide on how to do that.
As soon as you're ready you can continue to setup this package.
First of all you need to [install it](#install) with your preferred package manager.
The *graphql-code-generator* plugin can be found under `vue-graphql-inject/lib/codegen`.
You may add a new output file specifically for this plugin. For example:
```yaml
schema: "http://localhost:3000/graphql"
documents: "**/*.graphql"
generates:
src/generated/graphql-inject.ts:
- "vue-graphql-inject/lib/codegen"
```
The next step is to add the `Vue` plugin:
```javascript
import Vue from 'vue'
import { VueGraphQLInject } from 'vue-graphql-inject/lib/vue'
import { GraphQLInjectDefinition } from './generated/graphql-inject.ts'
Vue.use(VueGraphQLInject, { definition: GraphQLInjectDefinition })
```
Congratulations, you're now read to get started! Now you can use the following code in your Vue components:
```javascript
// For mutations:
this.$gql().mutations.UpdateUser
// For quries:
this.$gql().queries.GetUser
```
# Install
With NPM:
```
$ npm install vue-graphl-inject
```
With Yarn:
```
$ yarn add vue-graphql-inject
```