@dumbql/vue 0.0.2-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -0
- package/lib/plugin.d.ts +8 -0
- package/lib/plugin.d.ts.map +1 -0
- package/lib/plugin.js +17 -0
- package/lib/plugin.js.map +1 -0
- package/lib/use-mutation.d.ts +11 -0
- package/lib/use-mutation.d.ts.map +1 -0
- package/lib/use-mutation.js +24 -0
- package/lib/use-mutation.js.map +1 -0
- package/lib/use-query.d.ts +10 -0
- package/lib/use-query.d.ts.map +1 -0
- package/lib/use-query.js +46 -0
- package/lib/use-query.js.map +1 -0
- package/lib/use-subscription.d.ts +12 -0
- package/lib/use-subscription.d.ts.map +1 -0
- package/lib/use-subscription.js +72 -0
- package/lib/use-subscription.js.map +1 -0
- package/package.json +31 -0
- package/public-api.d.ts +6 -0
- package/public-api.d.ts.map +1 -0
- package/public-api.js +6 -0
- package/public-api.js.map +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="../../../public/logos/logo.png" alt="DumbQL" width="160"/>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">@dumbql/vue</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center"><b>Vue composables for @dumbql/client — useQuery, useMutation, useSubscription.</b></p>
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Features
|
|
12
|
+
|
|
13
|
+
- **`createDumbqlPlugin(client)`** — Vue plugin to provide DumbqlClient
|
|
14
|
+
- **`useQuery(document, variables?, options?)`** — reactive query composable
|
|
15
|
+
- **`useMutation(document)`** — mutation composable
|
|
16
|
+
- **`useSubscription(document, variables?, options?)`** — subscription composable
|
|
17
|
+
- **`useClient()`** — access DumbqlClient from anywhere
|
|
18
|
+
- **Reactive refs** — `data`, `loading`, `error` are Vue refs
|
|
19
|
+
- **SSR support** — works with Vue's `onServerPrefetch`
|
|
20
|
+
|
|
21
|
+
## Install
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @dumbql/vue @dumbql/client
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Quick Start
|
|
28
|
+
|
|
29
|
+
```vue
|
|
30
|
+
<script setup>
|
|
31
|
+
import { createDumbqlPlugin, useQuery, gql } from '@dumbql/vue';
|
|
32
|
+
import { createClient } from '@dumbql/client';
|
|
33
|
+
|
|
34
|
+
const client = createClient({ endpoint: '/graphql' });
|
|
35
|
+
const plugin = createDumbqlPlugin(client);
|
|
36
|
+
|
|
37
|
+
// In your component:
|
|
38
|
+
const GET_TODOS = gql`query Todos { todos { id title } }`;
|
|
39
|
+
const { data, loading, error, refetch } = useQuery(GET_TODOS);
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<template>
|
|
43
|
+
<p v-if="loading">Loading…</p>
|
|
44
|
+
<p v-else-if="error">{{ error }}</p>
|
|
45
|
+
<ul v-else>
|
|
46
|
+
<li v-for="todo in data.todos" :key="todo.id">{{ todo.title }}</li>
|
|
47
|
+
</ul>
|
|
48
|
+
</template>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## API Overview
|
|
52
|
+
|
|
53
|
+
| Export | Description |
|
|
54
|
+
|--------|-------------|
|
|
55
|
+
| `createDumbqlPlugin(client)` | Vue plugin — installs the client globally |
|
|
56
|
+
| `useClient()` | Access `DumbqlClient` from composition API |
|
|
57
|
+
| `useQuery(doc, vars?, opts?)` | Reactive query → `{ data, loading, error, refetch }` |
|
|
58
|
+
| `useMutation(doc)` | Mutation → `{ data, loading, error, mutate }` |
|
|
59
|
+
| `useSubscription(doc, vars?, opts?)` | Subscription → `{ data, loading, error }` |
|
|
60
|
+
|
|
61
|
+
## Dependencies
|
|
62
|
+
|
|
63
|
+
`vue` (^3), `@dumbql/client`, `graphql`
|
package/lib/plugin.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type App, type InjectionKey } from 'vue';
|
|
2
|
+
import type { DumbqlClient } from '@dumbql/client';
|
|
3
|
+
export declare const DUMBQL_CLIENT_KEY: InjectionKey<DumbqlClient>;
|
|
4
|
+
export declare function createDumbqlPlugin(client: DumbqlClient): {
|
|
5
|
+
install(app: App): void;
|
|
6
|
+
};
|
|
7
|
+
export declare function useClient(): DumbqlClient;
|
|
8
|
+
//# sourceMappingURL=plugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../../projects/dumbql/vue/src/lib/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,GAAG,EAAE,KAAK,YAAY,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,eAAO,MAAM,iBAAiB,EAAE,YAAY,CAAC,YAAY,CAA2B,CAAC;AAErF,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY;iBAEtC,GAAG,GAAG,IAAI;EAI1B;AAED,wBAAgB,SAAS,IAAI,YAAY,CAQxC"}
|
package/lib/plugin.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { inject } from 'vue';
|
|
2
|
+
export const DUMBQL_CLIENT_KEY = Symbol('dumbql-client');
|
|
3
|
+
export function createDumbqlPlugin(client) {
|
|
4
|
+
return {
|
|
5
|
+
install(app) {
|
|
6
|
+
app.provide(DUMBQL_CLIENT_KEY, client);
|
|
7
|
+
},
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
export function useClient() {
|
|
11
|
+
const client = inject(DUMBQL_CLIENT_KEY, null);
|
|
12
|
+
if (!client) {
|
|
13
|
+
throw new Error('No DumbqlClient found. Install the plugin: app.use(createDumbqlPlugin(client))');
|
|
14
|
+
}
|
|
15
|
+
return client;
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=plugin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../../../../projects/dumbql/vue/src/lib/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA+B,MAAM,KAAK,CAAC;AAG1D,MAAM,CAAC,MAAM,iBAAiB,GAA+B,MAAM,CAAC,eAAe,CAAC,CAAC;AAErF,MAAM,UAAU,kBAAkB,CAAC,MAAoB;IACrD,OAAO;QACL,OAAO,CAAC,GAAQ;YACd,GAAG,CAAC,OAAO,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;QACzC,CAAC;KACF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,SAAS;IACvB,MAAM,MAAM,GAAG,MAAM,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CACb,gFAAgF,CACjF,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type Ref } from 'vue';
|
|
2
|
+
import type { DocumentNode, TypedDocumentNode, GraphQLResult } from '@dumbql/client';
|
|
3
|
+
export type UseMutationFn<TData, TVariables> = (variables?: TVariables) => Promise<GraphQLResult<TData>>;
|
|
4
|
+
export interface UseMutationResult<TData, TVariables> {
|
|
5
|
+
data: Ref<TData | null>;
|
|
6
|
+
loading: Ref<boolean>;
|
|
7
|
+
error: Ref<string | null>;
|
|
8
|
+
mutate: UseMutationFn<TData, TVariables>;
|
|
9
|
+
}
|
|
10
|
+
export declare function useMutation<TData, TVariables extends Record<string, unknown> = Record<string, unknown>>(document: DocumentNode | TypedDocumentNode<TData, TVariables>): UseMutationResult<TData, TVariables>;
|
|
11
|
+
//# sourceMappingURL=use-mutation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-mutation.d.ts","sourceRoot":"","sources":["../../../../projects/dumbql/vue/src/lib/use-mutation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGrF,MAAM,MAAM,aAAa,CAAC,KAAK,EAAE,UAAU,IAAI,CAC7C,SAAS,CAAC,EAAE,UAAU,KACnB,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAEnC,MAAM,WAAW,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAClD,IAAI,EAAE,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACtB,KAAK,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1B,MAAM,EAAE,aAAa,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;CAC1C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrG,QAAQ,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,GAC5D,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,CAsBtC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ref } from 'vue';
|
|
2
|
+
import { useClient } from './plugin';
|
|
3
|
+
export function useMutation(document) {
|
|
4
|
+
const client = useClient();
|
|
5
|
+
const data = ref(null);
|
|
6
|
+
const loading = ref(false);
|
|
7
|
+
const error = ref(null);
|
|
8
|
+
const mutate = async (variables) => {
|
|
9
|
+
loading.value = true;
|
|
10
|
+
error.value = null;
|
|
11
|
+
data.value = null;
|
|
12
|
+
const result = await client.mutate(document, variables);
|
|
13
|
+
if (result.status === 'success') {
|
|
14
|
+
data.value = result.data;
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
error.value = result.error;
|
|
18
|
+
}
|
|
19
|
+
loading.value = false;
|
|
20
|
+
return result;
|
|
21
|
+
};
|
|
22
|
+
return { data, loading, error, mutate };
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=use-mutation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-mutation.js","sourceRoot":"","sources":["../../../../projects/dumbql/vue/src/lib/use-mutation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAY,MAAM,KAAK,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAarC,MAAM,UAAU,WAAW,CACzB,QAA6D;IAE7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,IAAI,GAAG,GAAG,CAAe,IAAI,CAAsB,CAAC;IAC1D,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,GAAG,CAAgB,IAAI,CAAC,CAAC;IAEvC,MAAM,MAAM,GAAqC,KAAK,EAAE,SAAsB,EAAE,EAAE;QAChF,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;QACrB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAElB,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,MAAM,CAAoB,QAAQ,EAAE,SAAS,CAAC,CAAC;QAC3E,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC7B,CAAC;QACD,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QACtB,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC1C,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type Ref } from 'vue';
|
|
2
|
+
import type { DocumentNode, TypedDocumentNode, GraphQLResult } from '@dumbql/client';
|
|
3
|
+
export interface UseQueryResult<TData, TVariables extends Record<string, unknown>> {
|
|
4
|
+
data: Ref<TData | null>;
|
|
5
|
+
loading: Ref<boolean>;
|
|
6
|
+
error: Ref<string | null>;
|
|
7
|
+
refetch: (vars?: TVariables) => Promise<GraphQLResult<TData>>;
|
|
8
|
+
}
|
|
9
|
+
export declare function useQuery<TData, TVariables extends Record<string, unknown> = Record<string, unknown>>(document: DocumentNode | TypedDocumentNode<TData, TVariables>, variables?: TVariables): UseQueryResult<TData, TVariables>;
|
|
10
|
+
//# sourceMappingURL=use-query.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-query.d.ts","sourceRoot":"","sources":["../../../../projects/dumbql/vue/src/lib/use-query.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGrF,MAAM,WAAW,cAAc,CAAC,KAAK,EAAE,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/E,IAAI,EAAE,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACtB,KAAK,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,UAAU,KAAK,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;CAC/D;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClG,QAAQ,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EAC7D,SAAS,CAAC,EAAE,UAAU,GACrB,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,CA8CnC"}
|
package/lib/use-query.js
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { ref, onMounted, onUnmounted } from 'vue';
|
|
2
|
+
import { useClient } from './plugin';
|
|
3
|
+
export function useQuery(document, variables) {
|
|
4
|
+
const client = useClient();
|
|
5
|
+
const data = ref(null);
|
|
6
|
+
const loading = ref(true);
|
|
7
|
+
const error = ref(null);
|
|
8
|
+
let cancelled = false;
|
|
9
|
+
let lastVars = variables;
|
|
10
|
+
const execute = async (vars) => {
|
|
11
|
+
loading.value = true;
|
|
12
|
+
error.value = null;
|
|
13
|
+
data.value = null;
|
|
14
|
+
lastVars = vars;
|
|
15
|
+
const result = await client.query(document, vars);
|
|
16
|
+
if (cancelled)
|
|
17
|
+
return;
|
|
18
|
+
if (result.status === 'success') {
|
|
19
|
+
data.value = result.data;
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
error.value = result.error;
|
|
23
|
+
}
|
|
24
|
+
loading.value = false;
|
|
25
|
+
};
|
|
26
|
+
onMounted(() => {
|
|
27
|
+
execute(variables);
|
|
28
|
+
});
|
|
29
|
+
const refetch = async (vars) => {
|
|
30
|
+
const result = await client.refetch(document, (vars ?? lastVars));
|
|
31
|
+
if (result.status === 'success') {
|
|
32
|
+
data.value = result.data;
|
|
33
|
+
error.value = null;
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
data.value = null;
|
|
37
|
+
error.value = result.error;
|
|
38
|
+
}
|
|
39
|
+
return result;
|
|
40
|
+
};
|
|
41
|
+
onUnmounted(() => {
|
|
42
|
+
cancelled = true;
|
|
43
|
+
});
|
|
44
|
+
return { data, loading, error, refetch };
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=use-query.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-query.js","sourceRoot":"","sources":["../../../../projects/dumbql/vue/src/lib/use-query.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAY,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AASrC,MAAM,UAAU,QAAQ,CACtB,QAA6D,EAC7D,SAAsB;IAEtB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,IAAI,GAAG,GAAG,CAAe,IAAI,CAAsB,CAAC;IAC1D,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,KAAK,GAAG,GAAG,CAAgB,IAAI,CAAC,CAAC;IAEvC,IAAI,SAAS,GAAG,KAAK,CAAC;IACtB,IAAI,QAAQ,GAAG,SAAS,CAAC;IAEzB,MAAM,OAAO,GAAG,KAAK,EAAE,IAAiB,EAAE,EAAE;QAC1C,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;QACrB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,QAAQ,GAAG,IAAI,CAAC;QAEhB,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,KAAK,CAAoB,QAAQ,EAAE,IAAI,CAAC,CAAC;QACrE,IAAI,SAAS;YAAE,OAAO;QACtB,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC7B,CAAC;QACD,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,KAAK,EAAE,IAAiB,EAAE,EAAE;QAC1C,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,OAAO,CAAoB,QAAQ,EAAE,CAAC,IAAI,IAAI,QAAQ,CAAe,CAAC,CAAC;QACnG,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC;YACzB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QACrB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC7B,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEF,WAAW,CAAC,GAAG,EAAE;QACf,SAAS,GAAG,IAAI,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAC3C,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type Ref } from 'vue';
|
|
2
|
+
import type { DocumentNode, TypedDocumentNode } from '@dumbql/client';
|
|
3
|
+
export interface UseSubscriptionResult<TData> {
|
|
4
|
+
data: Ref<TData | null>;
|
|
5
|
+
loading: Ref<boolean>;
|
|
6
|
+
error: Ref<string | null>;
|
|
7
|
+
}
|
|
8
|
+
export declare function useSubscription<TData, TVariables extends Record<string, unknown> = Record<string, unknown>>(document: DocumentNode | TypedDocumentNode<TData, TVariables>, variables?: TVariables, options?: {
|
|
9
|
+
wsEndpoint?: string;
|
|
10
|
+
shouldSubscribe?: boolean;
|
|
11
|
+
}): UseSubscriptionResult<TData>;
|
|
12
|
+
//# sourceMappingURL=use-subscription.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-subscription.d.ts","sourceRoot":"","sources":["../../../../projects/dumbql/vue/src/lib/use-subscription.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAItE,MAAM,WAAW,qBAAqB,CAAC,KAAK;IAC1C,IAAI,EAAE,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACtB,KAAK,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC3B;AAQD,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACzG,QAAQ,EAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,EAC7D,SAAS,CAAC,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE;IACR,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GACA,qBAAqB,CAAC,KAAK,CAAC,CA2E9B"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { ref, onMounted, onUnmounted } from 'vue';
|
|
2
|
+
import { print } from '@dumbql/client';
|
|
3
|
+
import { useClient } from './plugin';
|
|
4
|
+
export function useSubscription(document, variables, options) {
|
|
5
|
+
const client = useClient();
|
|
6
|
+
const data = ref(null);
|
|
7
|
+
const loading = ref(true);
|
|
8
|
+
const error = ref(null);
|
|
9
|
+
const wsEndpoint = options?.wsEndpoint ??
|
|
10
|
+
client.endpoint.replace(/^http/, 'ws');
|
|
11
|
+
const shouldSubscribe = options?.shouldSubscribe ?? true;
|
|
12
|
+
let ws = null;
|
|
13
|
+
onMounted(() => {
|
|
14
|
+
if (!shouldSubscribe)
|
|
15
|
+
return;
|
|
16
|
+
loading.value = true;
|
|
17
|
+
data.value = null;
|
|
18
|
+
error.value = null;
|
|
19
|
+
const queryStr = print(document);
|
|
20
|
+
ws = new WebSocket(wsEndpoint);
|
|
21
|
+
ws.onopen = () => {
|
|
22
|
+
const subscribeMsg = {
|
|
23
|
+
type: 'subscribe',
|
|
24
|
+
id: '1',
|
|
25
|
+
payload: {
|
|
26
|
+
query: queryStr,
|
|
27
|
+
variables: variables ?? {},
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
ws.send(JSON.stringify(subscribeMsg));
|
|
31
|
+
};
|
|
32
|
+
ws.onmessage = (event) => {
|
|
33
|
+
try {
|
|
34
|
+
const msg = JSON.parse(event.data);
|
|
35
|
+
if (msg.type === 'next' && msg.payload) {
|
|
36
|
+
if (msg.payload.errors) {
|
|
37
|
+
error.value = msg.payload.errors[0].message;
|
|
38
|
+
}
|
|
39
|
+
else if (msg.payload.data) {
|
|
40
|
+
data.value = msg.payload.data;
|
|
41
|
+
}
|
|
42
|
+
loading.value = false;
|
|
43
|
+
}
|
|
44
|
+
else if (msg.type === 'error') {
|
|
45
|
+
error.value = msg.payload?.errors?.[0]?.message ?? 'Subscription error';
|
|
46
|
+
loading.value = false;
|
|
47
|
+
}
|
|
48
|
+
else if (msg.type === 'complete') {
|
|
49
|
+
loading.value = false;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
catch {
|
|
53
|
+
// ignore malformed messages
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
ws.onerror = () => {
|
|
57
|
+
error.value = 'WebSocket connection error';
|
|
58
|
+
loading.value = false;
|
|
59
|
+
};
|
|
60
|
+
ws.onclose = () => {
|
|
61
|
+
loading.value = false;
|
|
62
|
+
};
|
|
63
|
+
});
|
|
64
|
+
onUnmounted(() => {
|
|
65
|
+
if (ws) {
|
|
66
|
+
ws.close(1000, 'unsubscribe');
|
|
67
|
+
ws = null;
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
return { data, loading, error };
|
|
71
|
+
}
|
|
72
|
+
//# sourceMappingURL=use-subscription.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-subscription.js","sourceRoot":"","sources":["../../../../projects/dumbql/vue/src/lib/use-subscription.ts"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@dumbql/vue",
|
|
3
|
+
"version": "0.0.2-alpha.1",
|
|
4
|
+
"description": "Vue composables for @dumbql/client — useQuery, useMutation, useSubscription",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"vue",
|
|
7
|
+
"graphql",
|
|
8
|
+
"composables",
|
|
9
|
+
"dumbql",
|
|
10
|
+
"graphql-client",
|
|
11
|
+
"vue3"
|
|
12
|
+
],
|
|
13
|
+
"license": "MIT",
|
|
14
|
+
"type": "module",
|
|
15
|
+
"main": "./public-api.js",
|
|
16
|
+
"types": "./public-api.d.ts",
|
|
17
|
+
"exports": {
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./public-api.d.ts",
|
|
20
|
+
"import": "./public-api.js",
|
|
21
|
+
"default": "./public-api.js"
|
|
22
|
+
},
|
|
23
|
+
"./package.json": "./package.json"
|
|
24
|
+
},
|
|
25
|
+
"sideEffects": false,
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"vue": "^3.0.0",
|
|
28
|
+
"@dumbql/client": "^0.0.1",
|
|
29
|
+
"graphql": "^17.0.0"
|
|
30
|
+
}
|
|
31
|
+
}
|
package/public-api.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { createDumbqlPlugin, useClient, DUMBQL_CLIENT_KEY } from './lib/plugin';
|
|
2
|
+
export { useQuery, type UseQueryResult } from './lib/use-query';
|
|
3
|
+
export { useMutation, type UseMutationResult, type UseMutationFn } from './lib/use-mutation';
|
|
4
|
+
export { useSubscription, type UseSubscriptionResult } from './lib/use-subscription';
|
|
5
|
+
export { gql, isSuccess, isError, unwrap, unwrapOrThrow } from '@dumbql/client';
|
|
6
|
+
//# sourceMappingURL=public-api.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../projects/dumbql/vue/src/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7F,OAAO,EAAE,eAAe,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
|
package/public-api.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { createDumbqlPlugin, useClient, DUMBQL_CLIENT_KEY } from './lib/plugin';
|
|
2
|
+
export { useQuery } from './lib/use-query';
|
|
3
|
+
export { useMutation } from './lib/use-mutation';
|
|
4
|
+
export { useSubscription } from './lib/use-subscription';
|
|
5
|
+
export { gql, isSuccess, isError, unwrap, unwrapOrThrow } from '@dumbql/client';
|
|
6
|
+
//# sourceMappingURL=public-api.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../../../projects/dumbql/vue/src/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAuB,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,WAAW,EAA8C,MAAM,oBAAoB,CAAC;AAC7F,OAAO,EAAE,eAAe,EAA8B,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
|