@mearie/vue 0.0.1-next.3 → 0.0.1-next.4

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.
Files changed (6) hide show
  1. package/README.md +28 -4
  2. package/dist/index.cjs +120 -17
  3. package/dist/index.d.cts +32 -26
  4. package/dist/index.d.ts +32 -26
  5. package/dist/index.js +114 -17
  6. package/package.json +14 -13
package/README.md CHANGED
@@ -2,20 +2,44 @@
2
2
 
3
3
  Vue bindings for Mearie GraphQL client.
4
4
 
5
- This package provides Vue composables and plugins for using Mearie in Vue
6
- applications.
5
+ This package provides Vue composables, plugins, and the GraphQL client runtime
6
+ for using Mearie in Vue applications.
7
7
 
8
8
  ## Installation
9
9
 
10
10
  ```bash
11
- npm install mearie @mearie/vue
11
+ npm install -D mearie
12
+ npm install @mearie/vue
12
13
  ```
13
14
 
15
+ The `mearie` package provides build-time code generation, while `@mearie/vue`
16
+ includes the runtime client and Vue-specific composables.
17
+
14
18
  ## Usage
15
19
 
20
+ First, create a client and set up the plugin in your app:
21
+
22
+ ```typescript
23
+ // src/main.ts
24
+ import { createApp } from 'vue';
25
+ import { createClient, httpLink, cacheLink, ClientPlugin } from '@mearie/vue';
26
+ import App from './App.vue';
27
+
28
+ const client = createClient({
29
+ links: [cacheLink(), httpLink({ url: 'https://api.example.com/graphql' })],
30
+ });
31
+
32
+ const app = createApp(App);
33
+ app.use(ClientPlugin, { client });
34
+ app.mount('#app');
35
+ ```
36
+
37
+ Then use it in your components:
38
+
16
39
  ```vue
40
+ <!-- src/components/UserProfile.vue -->
17
41
  <script setup lang="ts">
18
- import { createClient, httpLink, cacheLink, graphql } from 'mearie';
42
+ import { graphql } from '$mearie';
19
43
  import { useQuery } from '@mearie/vue';
20
44
 
21
45
  const props = defineProps<{ userId: string }>();
package/dist/index.cjs CHANGED
@@ -21,8 +21,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
21
21
  }) : target, mod));
22
22
 
23
23
  //#endregion
24
+ let __mearie_core = require("@mearie/core");
25
+ __mearie_core = __toESM(__mearie_core);
24
26
  let vue = require("vue");
25
27
  vue = __toESM(vue);
28
+ let __mearie_core_stream = require("@mearie/core/stream");
29
+ __mearie_core_stream = __toESM(__mearie_core_stream);
26
30
 
27
31
  //#region src/client-plugin.ts
28
32
  const ClientKey = Symbol("mearie-client");
@@ -37,39 +41,132 @@ const useClient = () => {
37
41
 
38
42
  //#endregion
39
43
  //#region src/use-query.ts
40
- const useQuery = (document, variables, options) => {
44
+ const useQuery = (query, ...[variables, options]) => {
45
+ const client = useClient();
46
+ const data = (0, vue.ref)(void 0);
47
+ const loading = (0, vue.ref)(!(0, vue.toValue)(options)?.skip);
48
+ const error = (0, vue.ref)(void 0);
49
+ let unsubscribe = null;
50
+ const execute = () => {
51
+ unsubscribe?.();
52
+ if ((0, vue.toValue)(options)?.skip) return;
53
+ loading.value = true;
54
+ error.value = void 0;
55
+ unsubscribe = (0, __mearie_core_stream.pipe)(client.executeQuery(query, (0, vue.toValue)(variables), (0, vue.toValue)(options)), (0, __mearie_core_stream.subscribe)({ next: (result) => {
56
+ if (result.errors && result.errors.length > 0) {
57
+ error.value = new __mearie_core.AggregatedError(result.errors);
58
+ loading.value = false;
59
+ } else {
60
+ data.value = result.data;
61
+ loading.value = false;
62
+ error.value = void 0;
63
+ }
64
+ } }));
65
+ };
66
+ (0, vue.watchEffect)((onCleanup) => {
67
+ execute();
68
+ onCleanup(() => {
69
+ unsubscribe?.();
70
+ });
71
+ });
41
72
  return {
42
- data: (0, vue.ref)(void 0),
43
- loading: (0, vue.ref)(true),
44
- error: (0, vue.ref)(void 0),
45
- refetch: () => {}
73
+ data,
74
+ loading,
75
+ error,
76
+ refetch: execute
46
77
  };
47
78
  };
48
79
 
49
80
  //#endregion
50
81
  //#region src/use-subscription.ts
51
- const useSubscription = (document, variables, options) => {
82
+ const useSubscription = (subscription, ...[variables, options]) => {
83
+ const client = useClient();
84
+ const data = (0, vue.ref)(void 0);
85
+ const loading = (0, vue.ref)(!(0, vue.toValue)(options)?.skip);
86
+ const error = (0, vue.ref)(void 0);
87
+ let unsubscribe = null;
88
+ const execute = () => {
89
+ unsubscribe?.();
90
+ if ((0, vue.toValue)(options)?.skip) return;
91
+ loading.value = true;
92
+ error.value = void 0;
93
+ unsubscribe = (0, __mearie_core_stream.pipe)(client.executeSubscription(subscription, (0, vue.toValue)(variables), (0, vue.toValue)(options)), (0, __mearie_core_stream.subscribe)({ next: (result) => {
94
+ if (result.errors && result.errors.length > 0) {
95
+ const err = new __mearie_core.AggregatedError(result.errors);
96
+ error.value = err;
97
+ loading.value = false;
98
+ (0, vue.toValue)(options)?.onError?.(err);
99
+ } else {
100
+ const resultData = result.data;
101
+ data.value = resultData;
102
+ loading.value = false;
103
+ (0, vue.toValue)(options)?.onData?.(resultData);
104
+ }
105
+ } }));
106
+ };
107
+ (0, vue.watchEffect)((onCleanup) => {
108
+ execute();
109
+ onCleanup(() => {
110
+ unsubscribe?.();
111
+ });
112
+ });
52
113
  return {
53
- data: (0, vue.ref)(void 0),
54
- loading: (0, vue.ref)(true),
55
- error: (0, vue.ref)(void 0)
114
+ data,
115
+ loading,
116
+ error
56
117
  };
57
118
  };
58
119
 
59
120
  //#endregion
60
121
  //#region src/use-mutation.ts
61
- const useMutation = (document) => {
62
- return [async () => ({}), {
63
- data: (0, vue.ref)(void 0),
64
- loading: (0, vue.ref)(false),
65
- error: (0, vue.ref)(void 0)
122
+ const useMutation = (mutation) => {
123
+ const client = useClient();
124
+ const data = (0, vue.ref)(void 0);
125
+ const loading = (0, vue.ref)(false);
126
+ const error = (0, vue.ref)(void 0);
127
+ const execute = async (variables, options) => {
128
+ loading.value = true;
129
+ error.value = void 0;
130
+ try {
131
+ const result = await (0, __mearie_core_stream.pipe)(client.executeMutation(mutation, variables, options), __mearie_core_stream.collect);
132
+ if (result.errors && result.errors.length > 0) {
133
+ const err = new __mearie_core.AggregatedError(result.errors);
134
+ error.value = err;
135
+ loading.value = false;
136
+ throw err;
137
+ }
138
+ data.value = result.data;
139
+ loading.value = false;
140
+ return result.data;
141
+ } catch (err) {
142
+ if (err instanceof __mearie_core.AggregatedError) error.value = err;
143
+ loading.value = false;
144
+ throw err;
145
+ }
146
+ };
147
+ return [execute, {
148
+ data,
149
+ loading,
150
+ error
66
151
  }];
67
152
  };
68
153
 
69
154
  //#endregion
70
155
  //#region src/use-fragment.ts
71
- const useFragment = (document, fragmentRef) => {
72
- return (0, vue.computed)(() => ({}));
156
+ const useFragment = (fragment, fragmentRef, ...[options]) => {
157
+ const client = useClient();
158
+ const result = (0, __mearie_core_stream.pipe)(client.executeFragment(fragment, (0, vue.toValue)(fragmentRef), (0, vue.toValue)(options)), __mearie_core_stream.peek);
159
+ if (result.data === void 0) throw new Error("Fragment data not found");
160
+ const data = (0, vue.ref)(result.data);
161
+ (0, vue.watchEffect)((onCleanup) => {
162
+ const unsubscribe = (0, __mearie_core_stream.pipe)(client.executeFragment(fragment, (0, vue.toValue)(fragmentRef), (0, vue.toValue)(options)), (0, __mearie_core_stream.subscribe)({ next: (result$1) => {
163
+ if (result$1.data !== void 0) data.value = result$1.data;
164
+ } }));
165
+ onCleanup(() => unsubscribe());
166
+ });
167
+ return { get data() {
168
+ return data.value;
169
+ } };
73
170
  };
74
171
 
75
172
  //#endregion
@@ -78,4 +175,10 @@ exports.useClient = useClient;
78
175
  exports.useFragment = useFragment;
79
176
  exports.useMutation = useMutation;
80
177
  exports.useQuery = useQuery;
81
- exports.useSubscription = useSubscription;
178
+ exports.useSubscription = useSubscription;
179
+ Object.keys(__mearie_core).forEach(function (k) {
180
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
181
+ enumerable: true,
182
+ get: function () { return __mearie_core[k]; }
183
+ });
184
+ });
package/dist/index.d.cts CHANGED
@@ -1,5 +1,6 @@
1
- import { App, ComputedRef, MaybeRefOrGetter, Ref } from "vue";
2
- import { Client, DataOf, DocumentNode, FragmentRef, VariablesOf } from "@mearie/core";
1
+ import { AggregatedError, Artifact, Client, DataOf, FragmentOptions, FragmentRefs, MutationOptions, QueryOptions, SubscriptionOptions, VariablesOf } from "@mearie/core";
2
+ import { App, MaybeRefOrGetter, Ref } from "vue";
3
+ export * from "@mearie/core";
3
4
 
4
5
  //#region src/client-plugin.d.ts
5
6
  type ClientPluginOptions = {
@@ -11,66 +12,71 @@ declare const ClientPlugin: {
11
12
  declare const useClient: () => Client;
12
13
  //#endregion
13
14
  //#region src/use-query.d.ts
14
- type UseQueryOptions = {
15
- skip?: MaybeRefOrGetter<boolean>;
15
+ type UseQueryOptions = QueryOptions & {
16
+ skip?: boolean;
16
17
  };
17
- type UseQueryReturn<Document$1 extends DocumentNode> = {
18
+ type Query<T extends Artifact<'query'>> = {
18
19
  data: Ref<undefined>;
19
20
  loading: Ref<true>;
20
21
  error: Ref<undefined>;
21
22
  refetch: () => void;
22
23
  } | {
23
- data: Ref<DataOf<Document$1>>;
24
+ data: Ref<DataOf<T>>;
24
25
  loading: Ref<false>;
25
26
  error: Ref<undefined>;
26
27
  refetch: () => void;
27
28
  } | {
28
- data: Ref<DataOf<Document$1> | undefined>;
29
+ data: Ref<DataOf<T> | undefined>;
29
30
  loading: Ref<false>;
30
- error: Ref<Error>;
31
+ error: Ref<AggregatedError>;
31
32
  refetch: () => void;
32
33
  };
33
- declare const useQuery: <Document extends DocumentNode>(document: Document, variables: MaybeRefOrGetter<VariablesOf<Document>>, options?: UseQueryOptions) => UseQueryReturn<Document>;
34
+ declare const useQuery: <T extends Artifact<"query">>(query: T, ...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, MaybeRefOrGetter<UseQueryOptions>?] : [MaybeRefOrGetter<VariablesOf<T>>, MaybeRefOrGetter<UseQueryOptions>?]) => Query<T>;
34
35
  //#endregion
35
36
  //#region src/use-subscription.d.ts
36
- type UseSubscriptionReturn<Document$1 extends DocumentNode> = {
37
+ type Subscription<T extends Artifact<'subscription'>> = {
37
38
  data: Ref<undefined>;
38
39
  loading: Ref<true>;
39
40
  error: Ref<undefined>;
40
41
  } | {
41
- data: Ref<DataOf<Document$1>>;
42
+ data: Ref<DataOf<T> | undefined>;
42
43
  loading: Ref<false>;
43
44
  error: Ref<undefined>;
44
45
  } | {
45
- data: Ref<DataOf<Document$1> | undefined>;
46
+ data: Ref<DataOf<T> | undefined>;
46
47
  loading: Ref<false>;
47
- error: Ref<Error>;
48
+ error: Ref<AggregatedError>;
48
49
  };
49
- type UseSubscriptionOptions<Document$1 extends DocumentNode> = {
50
- onData?: (data: DataOf<Document$1>) => void;
51
- onError?: (error: Error) => void;
50
+ type UseSubscriptionOptions<T extends Artifact<'subscription'>> = SubscriptionOptions & {
51
+ skip?: boolean;
52
+ onData?: (data: DataOf<T>) => void;
53
+ onError?: (error: AggregatedError) => void;
52
54
  };
53
- declare const useSubscription: <Document extends DocumentNode>(document: Document, variables: MaybeRefOrGetter<VariablesOf<Document>>, options?: UseSubscriptionOptions<Document>) => UseSubscriptionReturn<Document>;
55
+ declare const useSubscription: <T extends Artifact<"subscription">>(subscription: T, ...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, MaybeRefOrGetter<UseSubscriptionOptions<T>>?] : [MaybeRefOrGetter<VariablesOf<T>>, MaybeRefOrGetter<UseSubscriptionOptions<T>>?]) => Subscription<T>;
54
56
  //#endregion
55
57
  //#region src/use-mutation.d.ts
56
- type UseMutationResult<Document$1 extends DocumentNode> = {
58
+ type MutationResult<T extends Artifact<'mutation'>> = {
57
59
  data: Ref<undefined>;
58
60
  loading: Ref<true>;
59
61
  error: Ref<undefined>;
60
62
  } | {
61
- data: Ref<DataOf<Document$1>>;
63
+ data: Ref<DataOf<T> | undefined>;
62
64
  loading: Ref<false>;
63
65
  error: Ref<undefined>;
64
66
  } | {
65
- data: Ref<DataOf<Document$1> | undefined>;
67
+ data: Ref<DataOf<T> | undefined>;
66
68
  loading: Ref<false>;
67
- error: Ref<Error>;
69
+ error: Ref<AggregatedError>;
68
70
  };
69
- type UseMutationReturn<Document$1 extends DocumentNode> = [(variables: VariablesOf<Document$1>) => Promise<DataOf<Document$1>>, UseMutationResult<Document$1>];
70
- declare const useMutation: <Document extends DocumentNode>(document: Document) => UseMutationReturn<Document>;
71
+ type UseMutationOptions = MutationOptions;
72
+ type Mutation<T extends Artifact<'mutation'>> = [(...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, UseMutationOptions?] : [VariablesOf<T>, UseMutationOptions?]) => Promise<DataOf<T>>, MutationResult<T>];
73
+ declare const useMutation: <T extends Artifact<"mutation">>(mutation: T) => Mutation<T>;
71
74
  //#endregion
72
75
  //#region src/use-fragment.d.ts
73
- type UseFragmentReturn<Document$1 extends DocumentNode> = ComputedRef<DataOf<Document$1>>;
74
- declare const useFragment: <Document extends DocumentNode>(document: Document, fragmentRef: MaybeRefOrGetter<FragmentRef<Document>>) => UseFragmentReturn<Document>;
76
+ type UseFragmentOptions = FragmentOptions;
77
+ type Fragment<T extends Artifact<'fragment'>> = {
78
+ data: DataOf<T>;
79
+ };
80
+ declare const useFragment: <T extends Artifact<"fragment">>(fragment: T, fragmentRef: MaybeRefOrGetter<FragmentRefs<T["name"]>>, ...[options]: [MaybeRefOrGetter<UseFragmentOptions>?]) => Fragment<T>;
75
81
  //#endregion
76
- export { ClientPlugin, type ClientPluginOptions, type UseFragmentReturn, type UseMutationResult, type UseMutationReturn, type UseQueryOptions, type UseQueryReturn, type UseSubscriptionOptions, type UseSubscriptionReturn, useClient, useFragment, useMutation, useQuery, useSubscription };
82
+ export { ClientPlugin, type ClientPluginOptions, type Fragment, type Mutation, type Query, type Subscription, type UseFragmentOptions, type UseMutationOptions, type UseQueryOptions, type UseSubscriptionOptions, useClient, useFragment, useMutation, useQuery, useSubscription };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import { App, ComputedRef, MaybeRefOrGetter, Ref } from "vue";
2
- import { Client, DataOf, DocumentNode, FragmentRef, VariablesOf } from "@mearie/core";
1
+ import { AggregatedError, Artifact, Client, DataOf, FragmentOptions, FragmentRefs, MutationOptions, QueryOptions, SubscriptionOptions, VariablesOf } from "@mearie/core";
2
+ import { App, MaybeRefOrGetter, Ref } from "vue";
3
+ export * from "@mearie/core";
3
4
 
4
5
  //#region src/client-plugin.d.ts
5
6
  type ClientPluginOptions = {
@@ -11,66 +12,71 @@ declare const ClientPlugin: {
11
12
  declare const useClient: () => Client;
12
13
  //#endregion
13
14
  //#region src/use-query.d.ts
14
- type UseQueryOptions = {
15
- skip?: MaybeRefOrGetter<boolean>;
15
+ type UseQueryOptions = QueryOptions & {
16
+ skip?: boolean;
16
17
  };
17
- type UseQueryReturn<Document$1 extends DocumentNode> = {
18
+ type Query<T extends Artifact<'query'>> = {
18
19
  data: Ref<undefined>;
19
20
  loading: Ref<true>;
20
21
  error: Ref<undefined>;
21
22
  refetch: () => void;
22
23
  } | {
23
- data: Ref<DataOf<Document$1>>;
24
+ data: Ref<DataOf<T>>;
24
25
  loading: Ref<false>;
25
26
  error: Ref<undefined>;
26
27
  refetch: () => void;
27
28
  } | {
28
- data: Ref<DataOf<Document$1> | undefined>;
29
+ data: Ref<DataOf<T> | undefined>;
29
30
  loading: Ref<false>;
30
- error: Ref<Error>;
31
+ error: Ref<AggregatedError>;
31
32
  refetch: () => void;
32
33
  };
33
- declare const useQuery: <Document extends DocumentNode>(document: Document, variables: MaybeRefOrGetter<VariablesOf<Document>>, options?: UseQueryOptions) => UseQueryReturn<Document>;
34
+ declare const useQuery: <T extends Artifact<"query">>(query: T, ...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, MaybeRefOrGetter<UseQueryOptions>?] : [MaybeRefOrGetter<VariablesOf<T>>, MaybeRefOrGetter<UseQueryOptions>?]) => Query<T>;
34
35
  //#endregion
35
36
  //#region src/use-subscription.d.ts
36
- type UseSubscriptionReturn<Document$1 extends DocumentNode> = {
37
+ type Subscription<T extends Artifact<'subscription'>> = {
37
38
  data: Ref<undefined>;
38
39
  loading: Ref<true>;
39
40
  error: Ref<undefined>;
40
41
  } | {
41
- data: Ref<DataOf<Document$1>>;
42
+ data: Ref<DataOf<T> | undefined>;
42
43
  loading: Ref<false>;
43
44
  error: Ref<undefined>;
44
45
  } | {
45
- data: Ref<DataOf<Document$1> | undefined>;
46
+ data: Ref<DataOf<T> | undefined>;
46
47
  loading: Ref<false>;
47
- error: Ref<Error>;
48
+ error: Ref<AggregatedError>;
48
49
  };
49
- type UseSubscriptionOptions<Document$1 extends DocumentNode> = {
50
- onData?: (data: DataOf<Document$1>) => void;
51
- onError?: (error: Error) => void;
50
+ type UseSubscriptionOptions<T extends Artifact<'subscription'>> = SubscriptionOptions & {
51
+ skip?: boolean;
52
+ onData?: (data: DataOf<T>) => void;
53
+ onError?: (error: AggregatedError) => void;
52
54
  };
53
- declare const useSubscription: <Document extends DocumentNode>(document: Document, variables: MaybeRefOrGetter<VariablesOf<Document>>, options?: UseSubscriptionOptions<Document>) => UseSubscriptionReturn<Document>;
55
+ declare const useSubscription: <T extends Artifact<"subscription">>(subscription: T, ...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, MaybeRefOrGetter<UseSubscriptionOptions<T>>?] : [MaybeRefOrGetter<VariablesOf<T>>, MaybeRefOrGetter<UseSubscriptionOptions<T>>?]) => Subscription<T>;
54
56
  //#endregion
55
57
  //#region src/use-mutation.d.ts
56
- type UseMutationResult<Document$1 extends DocumentNode> = {
58
+ type MutationResult<T extends Artifact<'mutation'>> = {
57
59
  data: Ref<undefined>;
58
60
  loading: Ref<true>;
59
61
  error: Ref<undefined>;
60
62
  } | {
61
- data: Ref<DataOf<Document$1>>;
63
+ data: Ref<DataOf<T> | undefined>;
62
64
  loading: Ref<false>;
63
65
  error: Ref<undefined>;
64
66
  } | {
65
- data: Ref<DataOf<Document$1> | undefined>;
67
+ data: Ref<DataOf<T> | undefined>;
66
68
  loading: Ref<false>;
67
- error: Ref<Error>;
69
+ error: Ref<AggregatedError>;
68
70
  };
69
- type UseMutationReturn<Document$1 extends DocumentNode> = [(variables: VariablesOf<Document$1>) => Promise<DataOf<Document$1>>, UseMutationResult<Document$1>];
70
- declare const useMutation: <Document extends DocumentNode>(document: Document) => UseMutationReturn<Document>;
71
+ type UseMutationOptions = MutationOptions;
72
+ type Mutation<T extends Artifact<'mutation'>> = [(...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, UseMutationOptions?] : [VariablesOf<T>, UseMutationOptions?]) => Promise<DataOf<T>>, MutationResult<T>];
73
+ declare const useMutation: <T extends Artifact<"mutation">>(mutation: T) => Mutation<T>;
71
74
  //#endregion
72
75
  //#region src/use-fragment.d.ts
73
- type UseFragmentReturn<Document$1 extends DocumentNode> = ComputedRef<DataOf<Document$1>>;
74
- declare const useFragment: <Document extends DocumentNode>(document: Document, fragmentRef: MaybeRefOrGetter<FragmentRef<Document>>) => UseFragmentReturn<Document>;
76
+ type UseFragmentOptions = FragmentOptions;
77
+ type Fragment<T extends Artifact<'fragment'>> = {
78
+ data: DataOf<T>;
79
+ };
80
+ declare const useFragment: <T extends Artifact<"fragment">>(fragment: T, fragmentRef: MaybeRefOrGetter<FragmentRefs<T["name"]>>, ...[options]: [MaybeRefOrGetter<UseFragmentOptions>?]) => Fragment<T>;
75
81
  //#endregion
76
- export { ClientPlugin, type ClientPluginOptions, type UseFragmentReturn, type UseMutationResult, type UseMutationReturn, type UseQueryOptions, type UseQueryReturn, type UseSubscriptionOptions, type UseSubscriptionReturn, useClient, useFragment, useMutation, useQuery, useSubscription };
82
+ export { ClientPlugin, type ClientPluginOptions, type Fragment, type Mutation, type Query, type Subscription, type UseFragmentOptions, type UseMutationOptions, type UseQueryOptions, type UseSubscriptionOptions, useClient, useFragment, useMutation, useQuery, useSubscription };
package/dist/index.js CHANGED
@@ -1,4 +1,8 @@
1
- import { computed, inject, ref } from "vue";
1
+ import { AggregatedError } from "@mearie/core";
2
+ import { inject, ref, toValue, watchEffect } from "vue";
3
+ import { collect, peek, pipe, subscribe } from "@mearie/core/stream";
4
+
5
+ export * from "@mearie/core"
2
6
 
3
7
  //#region src/client-plugin.ts
4
8
  const ClientKey = Symbol("mearie-client");
@@ -13,39 +17,132 @@ const useClient = () => {
13
17
 
14
18
  //#endregion
15
19
  //#region src/use-query.ts
16
- const useQuery = (document, variables, options) => {
20
+ const useQuery = (query, ...[variables, options]) => {
21
+ const client = useClient();
22
+ const data = ref(void 0);
23
+ const loading = ref(!toValue(options)?.skip);
24
+ const error = ref(void 0);
25
+ let unsubscribe = null;
26
+ const execute = () => {
27
+ unsubscribe?.();
28
+ if (toValue(options)?.skip) return;
29
+ loading.value = true;
30
+ error.value = void 0;
31
+ unsubscribe = pipe(client.executeQuery(query, toValue(variables), toValue(options)), subscribe({ next: (result) => {
32
+ if (result.errors && result.errors.length > 0) {
33
+ error.value = new AggregatedError(result.errors);
34
+ loading.value = false;
35
+ } else {
36
+ data.value = result.data;
37
+ loading.value = false;
38
+ error.value = void 0;
39
+ }
40
+ } }));
41
+ };
42
+ watchEffect((onCleanup) => {
43
+ execute();
44
+ onCleanup(() => {
45
+ unsubscribe?.();
46
+ });
47
+ });
17
48
  return {
18
- data: ref(void 0),
19
- loading: ref(true),
20
- error: ref(void 0),
21
- refetch: () => {}
49
+ data,
50
+ loading,
51
+ error,
52
+ refetch: execute
22
53
  };
23
54
  };
24
55
 
25
56
  //#endregion
26
57
  //#region src/use-subscription.ts
27
- const useSubscription = (document, variables, options) => {
58
+ const useSubscription = (subscription, ...[variables, options]) => {
59
+ const client = useClient();
60
+ const data = ref(void 0);
61
+ const loading = ref(!toValue(options)?.skip);
62
+ const error = ref(void 0);
63
+ let unsubscribe = null;
64
+ const execute = () => {
65
+ unsubscribe?.();
66
+ if (toValue(options)?.skip) return;
67
+ loading.value = true;
68
+ error.value = void 0;
69
+ unsubscribe = pipe(client.executeSubscription(subscription, toValue(variables), toValue(options)), subscribe({ next: (result) => {
70
+ if (result.errors && result.errors.length > 0) {
71
+ const err = new AggregatedError(result.errors);
72
+ error.value = err;
73
+ loading.value = false;
74
+ toValue(options)?.onError?.(err);
75
+ } else {
76
+ const resultData = result.data;
77
+ data.value = resultData;
78
+ loading.value = false;
79
+ toValue(options)?.onData?.(resultData);
80
+ }
81
+ } }));
82
+ };
83
+ watchEffect((onCleanup) => {
84
+ execute();
85
+ onCleanup(() => {
86
+ unsubscribe?.();
87
+ });
88
+ });
28
89
  return {
29
- data: ref(void 0),
30
- loading: ref(true),
31
- error: ref(void 0)
90
+ data,
91
+ loading,
92
+ error
32
93
  };
33
94
  };
34
95
 
35
96
  //#endregion
36
97
  //#region src/use-mutation.ts
37
- const useMutation = (document) => {
38
- return [async () => ({}), {
39
- data: ref(void 0),
40
- loading: ref(false),
41
- error: ref(void 0)
98
+ const useMutation = (mutation) => {
99
+ const client = useClient();
100
+ const data = ref(void 0);
101
+ const loading = ref(false);
102
+ const error = ref(void 0);
103
+ const execute = async (variables, options) => {
104
+ loading.value = true;
105
+ error.value = void 0;
106
+ try {
107
+ const result = await pipe(client.executeMutation(mutation, variables, options), collect);
108
+ if (result.errors && result.errors.length > 0) {
109
+ const err = new AggregatedError(result.errors);
110
+ error.value = err;
111
+ loading.value = false;
112
+ throw err;
113
+ }
114
+ data.value = result.data;
115
+ loading.value = false;
116
+ return result.data;
117
+ } catch (err) {
118
+ if (err instanceof AggregatedError) error.value = err;
119
+ loading.value = false;
120
+ throw err;
121
+ }
122
+ };
123
+ return [execute, {
124
+ data,
125
+ loading,
126
+ error
42
127
  }];
43
128
  };
44
129
 
45
130
  //#endregion
46
131
  //#region src/use-fragment.ts
47
- const useFragment = (document, fragmentRef) => {
48
- return computed(() => ({}));
132
+ const useFragment = (fragment, fragmentRef, ...[options]) => {
133
+ const client = useClient();
134
+ const result = pipe(client.executeFragment(fragment, toValue(fragmentRef), toValue(options)), peek);
135
+ if (result.data === void 0) throw new Error("Fragment data not found");
136
+ const data = ref(result.data);
137
+ watchEffect((onCleanup) => {
138
+ const unsubscribe = pipe(client.executeFragment(fragment, toValue(fragmentRef), toValue(options)), subscribe({ next: (result$1) => {
139
+ if (result$1.data !== void 0) data.value = result$1.data;
140
+ } }));
141
+ onCleanup(() => unsubscribe());
142
+ });
143
+ return { get data() {
144
+ return data.value;
145
+ } };
49
146
  };
50
147
 
51
148
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mearie/vue",
3
- "version": "0.0.1-next.3",
3
+ "version": "0.0.1-next.4",
4
4
  "description": "Type-safe, zero-overhead GraphQL client",
5
5
  "keywords": [
6
6
  "graphql",
@@ -26,17 +26,25 @@
26
26
  "author": "Bae Junehyeon <finn@penxle.io>",
27
27
  "sideEffects": false,
28
28
  "type": "module",
29
- "main": "./dist/index.cjs",
29
+ "exports": {
30
+ ".": {
31
+ "types": "./dist/index.d.ts",
32
+ "import": "./dist/index.js",
33
+ "require": "./dist/index.cjs"
34
+ },
35
+ "./package.json": "./package.json"
36
+ },
30
37
  "files": [
31
38
  "dist",
32
39
  "package.json",
33
40
  "README.md"
34
41
  ],
35
42
  "dependencies": {
36
- "@mearie/client": "0.0.1-next.3"
43
+ "@mearie/core": "0.0.1-next.4"
37
44
  },
38
45
  "devDependencies": {
39
- "tsdown": "^0.15.8",
46
+ "tsdown": "^0.15.12",
47
+ "typescript": "^5.9.3",
40
48
  "vue": "^3.5.22"
41
49
  },
42
50
  "peerDependencies": {
@@ -52,16 +60,9 @@
52
60
  },
53
61
  "scripts": {
54
62
  "build": "tsdown",
55
- "dev": "tsdown --watch"
56
- },
57
- "exports": {
58
- ".": {
59
- "types": "./dist/index.d.ts",
60
- "import": "./dist/index.js",
61
- "require": "./dist/index.cjs"
62
- },
63
- "./package.json": "./package.json"
63
+ "typecheck": "tsc"
64
64
  },
65
+ "main": "./dist/index.cjs",
65
66
  "module": "./dist/index.js",
66
67
  "types": "./dist/index.d.ts"
67
68
  }