Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wheatjs/vite-plugin-vue-gql
⚡ GraphQL Tags for your Vue SFC ⚡
https://github.com/wheatjs/vite-plugin-vue-gql
graphql urql vite vitejs vue
Last synced: about 2 months ago
JSON representation
⚡ GraphQL Tags for your Vue SFC ⚡
- Host: GitHub
- URL: https://github.com/wheatjs/vite-plugin-vue-gql
- Owner: wheatjs
- License: mit
- Created: 2021-02-24T20:35:22.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-02T21:22:39.000Z (almost 3 years ago)
- Last Synced: 2024-05-12T01:33:26.349Z (4 months ago)
- Topics: graphql, urql, vite, vitejs, vue
- Language: TypeScript
- Homepage:
- Size: 464 KB
- Stars: 211
- Watchers: 4
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - v3 - GraphQL Tags for your Vue SFC. (Plugins / Vue)
- awesome-list - vite-plugin-vue-gql
- awesome-vite - v3 - GraphQL Tags for your Vue SFC. (Plugins / Vue)
README
Clean up your Vue SFC Scripts by moving your graphql queries to their own block
## 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 \ tags.
> ⚠️ This Plugin is still in Development and currently only works with the `` 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 { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Vql from 'vite-plugin-vue-gql'
export default defineConfig({
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()
{{ data.hello }}
{
hello
}
```
**Query with Variables**
```html
import { ref } from 'vue'
import { useQuery } from 'vql'
const name = ref('Evan')
const { data } = useQuery({ variables: { name } })
...
query($name: String!) {
user(name: $name) {
username
}
}
```
**Named Query**
```html
import { ref } from 'vue'
import { useQuery } from 'vql'
const name = ref('Evan')
const { data } = useQuery('users', { variables: { name } })
...
query($name: String!) {
user(name: $name) {
username
}
}
```
**Mutations**
```html
import { ref } from 'vue'
import { useMutation } from 'vql'
const { executeMutation } = useMutation()
...
mutation($name: String!) {
createUser(name: $name) {
username
}
}
```
**Subscriptions**
```html
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)
...
subscription MessageSub($from: String!) {
newMessages(from: $from) {
id
from
text
}
}
```
## Fragments
You can use fragments in your graphql queries, mutations, and subscriptions by specifying your `.gql` files that contain your fragments in the config.
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Vql from 'vite-plugin-vue-gql'
export default defineConfig({
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
import { ref } from 'vue'
import { useQuery } from 'vql'
const name = ref('RADWIMPS')
const { data } = useQuery({ variables: { name } })
...
query($name: String!) {
queryArtists(byName: $name) {
name
image
albums {
...albumFields
}
}
}
```
## Type Definitions
You can automatically generate typescript type definition files from you graphql schema by providing a link to your server
or a path to your graphql schema.
```ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Vql from 'vite-plugin-vue-gql'
export default defineConfig({
plugins: [
Vue(),
Vql({
schema: 'https://my-api.dev/graphql',
dts: 'src/schema.d.ts',
}),
],
})
```
Whenever the application is run, vite-plugin-vue-gql will download the schema from your server or open the provided gql schema and generate a typescript
type definition file for your schema via [GraphQL Code Generator](https://www.graphql-code-generator.com/)
## 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)