# vite-plugin-vue-gql

> Vue SFC GraphQL Block

Latest version **0.2.10** (published 2021-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-vue-gql
pnpm add vite-plugin-vue-gql
yarn add vite-plugin-vue-gql
bun add vite-plugin-vue-gql
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.10 |
| Published | 2021-10-15 |
| First published | 2021-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 4.6 MB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 214 |
| Author | Jacob Clevenger |
| Maintainers | wheatley |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-vue-gql
- Repository: https://github.com/jacobclevenger/vite-plugin-vue-gql
- Issues: https://github.com/jacobclevenger/vite-plugin-vue-gql/issues
- npm.io page: https://npm.io/package/vite-plugin-vue-gql

## Dependencies (11)

- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [debug](https://npm.io/package/debug.md) ^4.3.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [undici](https://npm.io/package/undici.md) ^4.7.2
- [local-pkg](https://npm.io/package/local-pkg.md) ^0.4.0
- [deep-equal](https://npm.io/package/deep-equal.md) ^2.0.5
- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.5
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.13.15
- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.0.5
- [@graphql-codegen/core](https://npm.io/package/@graphql-codegen/core.md) ^2.2.0
- [@graphql-codegen/typescript](https://npm.io/package/@graphql-codegen/typescript.md) ^2.2.4

## Recent versions

- 0.2.10 (latest) — 2021-10-15
- 0.2.9 — 2021-07-28
- 0.2.8 — 2021-06-04
- 0.2.7 — 2021-06-03
- 0.2.6 — 2021-06-03
- 0.2.5 — 2021-06-03
- 0.2.4 — 2021-06-03
- 0.2.3 — 2021-06-03
- 0.2.2 — 2021-06-03
- 0.2.1 — 2021-06-03
- 0.2.0 — 2021-06-03
- 0.1.0 — 2021-04-16
- 0.0.8 — 2021-04-13
- 0.0.7 — 2021-03-19
- 0.0.6 — 2021-03-03
- … 5 more at https://npm.io/package/vite-plugin-vue-gql/versions

## README

<p align="center">
  <img src='./assets/VQL-Logo.svg' alt="VQL" width="500">
</p>

<p align="center">
  Clean up your Vue SFC Scripts by moving your graphql queries to their own block
</p>

<p align="center">
<a href="https://www.npmjs.com/package/vite-plugin-vue-gql" target="__blank"><img src="https://img.shields.io/npm/v/vite-plugin-vue-gql?color=a356fe&label=Version" alt="NPM version"></a>
</p>

## Why?
When writing Vue clients for GraphQL APIs, I've noticed scripts in Vue SFC files have become over-filled with GraphQL queries and had a need to organize the code better without taking away from what makes SFCs great: Having all the code for a single component organized and in one place.

Moving queries to their own files would then create multiple files for a single component, cluttering the project more and reducing productivity in having to write components spanning multiple files.

Enter Vue GQL! I wrote this Vite plugin to allow placing GraphQL queries related to a component directly within the component file without cluttering scripts, by placing them within their own specialized \<gql\> tags.

> ⚠️ This Plugin is still in Development and currently only works with the `<script setup>` format 

## Install
```bash
# Install Plugin
npm i -D vite-plugin-vue-gql

# Install Peer Dependicies
npm i @urql/vue graphql
```

```ts
// vite.config.ts

import Vue from '@vitejs/plugin-vue'
import Vql from 'vite-plugin-vue-gql'

export default {
  plugins: [
    Vue(), 
    Vql()
  ],
}
```

If you are using typescript, make sure you include the following in your `tsconfig.json`
```json
{
  "compilerOptions": {
    "types": [
      "vite-plugin-vue-gql/client"
    ]
  }
}
```

## Usage
Instead of import your functions from `@urql/vue` you should now import them from the `vql` package.

```ts
import { useQuery, useMutation, useSubscription } from 'vql'
```

`<gql>` tags can have the following attributes, `query`(not required), `mutation`, `subscription`, and `name`. The first three attributes indicates what type of query it is while the `name` attribute allows you to have multiple queries in the same Vue SFC. 
```html
<!-- Query-->
<gql></gql>

<!-- Mutation -->
<gql mutation></gql>

<!-- Subscription -->
<gql subscription></gql>

<!-- Named GQL Block -->
<gql name="users"></gql>
```

## Examples

**Basic Usage**
```html
<script setup lang="ts">
import { useQuery } from 'vql'

const { data } = useQuery()
</script>

<template>
  <h1>{{ data.hello }}</h1>
</template>

<gql>
{
  hello
}
</gql>
```


**Query with Variables**
```html
<script setup lang="ts">
import { ref } from 'vue'
import { useQuery } from 'vql'

const name = ref('Evan')
const { data } = useQuery({ variables: { name } })
</script>

<template>...</template>

<gql>
query($name: String!) {
  user(name: $name) {
    username
  }
}
</gql>
```

**Named Query**
```html
<script setup lang="ts">
import { ref } from 'vue'
import { useQuery } from 'vql'

const name = ref('Evan')
const { data } = useQuery('users', { variables: { name } })
</script>

<template>...</template>

<gql name="users">
query($name: String!) {
  user(name: $name) {
    username
  }
}
</gql>
```

**Mutations**
```html
<script setup lang="ts">
import { ref } from 'vue'
import { useMutation } from 'vql'

const { executeMutation } = useMutation()
</script>

<template>...</template>

<gql mutation>
mutation($name: String!) {
  createUser(name: $name) {
    username
  }
}
</gql>
```

**Subscriptions**
```html
<script setup lang="ts">
import { ref } from 'vue'
import { useSubscription } from 'vql'

const isPaused = ref(false)
const handleSubscription = (messages = [], response) => {
  return [response.newMessages, ...messages]
}

const { data } = useSubscription({ from: 'Eren' }, { pause: isPaused }, handleSubscription)
</script>

<template>...</template>

<gql mutation>
subscription MessageSub($from: String!) {
  newMessages(from: $from) {
    id
    from
    text
  }
}
</gql>
```

## Fragments
You can use fargments in your graphql queries, mutations, and subscriptions by specifying your `.gql` files that contain your fragments in the config. 

```ts
// vite.config.ts

import Vue from '@vitejs/plugin-vue'
import Vql from 'vite-plugin-vue-gql'

export default {
  plugins: [
    Vue(), 
    Vql({
      fragments: './src/fragments/**/*.gql'
    })
  ],
}
```

Here is a general idea of what your fragments should look like
```gql
# src/fragments/albums.gql

fragment albumFields on Album {
  id
  name
  image
}
```

Finally you can use these fragments in your Vue SFC

```html
<script setup lang="ts">
import { ref } from 'vue'
import { useQuery } from 'vql'

const name = ref('RADWIMPS')
const { data } = useQuery({ variables: { name } })
</script>

<template>...</template>

<gql>
query($name: String!) {
  queryArtists(byName: $name) {
    name
    image
    albums {
      ...albumFields
    }
  }
}
</gql>
```

## Roadmap
- [x] Add support for fragments
- [ ] Investigate automatically generating queries from SFC templates

## License

[MIT License](https://github.com/jacobclevenger/vite-plugin-vue-gql/blob/main/LICENSE) © 2021-PRESENT [Jacob Clevenger](https://github.com/jacobclevenger)

---
_Source: https://npm.io/package/vite-plugin-vue-gql · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._