@sidy/vue-shimio-graphql
v2.1.3
Published
A VueJS plugin to make graphql websocket queries
Downloads
14
Readme
Install
import graphql from '@sidy/vue-shimio-graphql'
Vue.use(graphql, {
name: 'graphql', // vue prototype namespace
hosts: [{
name: 'Api',
endpoint: 'ws://0.0.0.0:3000', // this.$graphql.Api.query('{ ping }')
retry_strategy: () => 2000,
on_connect: () => {},
on_disconnect: () => {}
}, {
name: 'Auth',
endpoint: 'ws://0.0.0.0:3001',
}]
})
Usage in components
<template lang="pug">
<Api query="query BLABLABLA { }" ref="api">
<template #loading>
Loading.. (v-if loading)
</template>
<template #BLABLABLA="{ operation }"> <!-- see @hydre/shimio-graphql -->
The `foo` operation
</template>
<template #none="{ operation }"> <!-- in case of early error -->
a `none` operation
</template>
<template #anon="{ operation }"> <!-- in case of unnamed query -->
an `anon` operation
</template>
<template #all="{ operations }"> <!-- [name, operation] = operations -->
All operation (always active)
</template>
</template>
Hybrid usage (recommended over raw js)
<template lang="pug">
<Api
query="query foo { }" ref="api"
@foo="operation => { }"
/>
</template>
Usage in raw js
const { query, disconnect } = Vue.prototype.$graphql.Auth
const queried = await query('{ ping }') // run some queries
const result = await queried.once() // get one result and abort
for await (const operation of queried.listen()) { // or iterate and listen
result.stop() // unsubscribe from the operation
}