This plugin allows you to use gql blocks in your Vue SFC with Vitejs
Install the pacakge
npm install -D vite-plugin-vue-gqlInstall peer dependencies
npm install --save @urql/vue graphql
Add to your vite.config.js
import Vue from '@vitejs/plugin-vue';
import Vql from 'vite-plugin-vue-gql';
export default {
plugins: [Vue(), Vql()],
};// main.js
import { createApp } from 'vue'
import urql from '@urql/vue'
import App from './App.vue'
const app = createApp(App)
app.use(urql, { url: 'http://localhost:3000/graphql' })
app.mount('#app')<!-- ExampleComponent.vue -->
<script setup>
import { useQuery } from 'vite-gql'
const { fetching, error, data } = useQuery({ name: 'Evan' })
</script>
<template>
<div v-if="fetching">
Loading...
</div>
<div v-else-if="error.message">
Error {{ error.message }}
</div>
<div v-else>
<img :src="data.user.avatar">
<span>{{ data.user.username }}</span>
</div>
</template>
<gql>
query($name: String!) {
user(name: $name) {
username
avatar
bio {
description
}
}
}
</gql>Multiple GQL Tags
<!-- ExampleComponent.vue -->
<script setup>
import { useQuery } from 'vite-gql'
const { fetching, error, data } = useQuery()
const { fetching: userFetching, error: userError, data: userData } = useQuery('user', { name: 'Evan' })
</script>
<template>
...
</template>
<gql>
query($name: String!) {
info {
date
time
}
}
</gql>
<gql name="user">
query($name: String!) {
user(name: $name) {
username
avatar
bio {
description
}
}
}
</gql>Mutations
<!-- ExampleComponent.vue -->
<script setup >
import { useMutation } from 'vite-gql'
const { executeMutation } = mutation()
const createUser = (name) => {
executeMutation({ name })
}
</script>
<template>
...
</template>
<gql mutation>
mutation($name: String!) {
createUser(name: $name) {
username
created
}
}
</gql>For more examples visit the /examples/spa directory in the repo
When you create a <gql> tag, this plugin will pick that up and automatically inject it into your useFetch statement, allowing you to keep your query and your code seperate.
- Support
useMutationanduseSubscription - Support multiple named gql tags(or allow them to be tagged as mutations or subscriptions)
- Look into auto detecting used properties and auto-generating a GQL request
- Add in support for fragments
MIT License © 2021-PRESENT Jacob Clevenger