@urql/vue
Version:
A highly customizable and versatile GraphQL client for vue
306 lines (286 loc) • 7.05 kB
JavaScript
import { Client as e, createRequest as r } from "@urql/core";
export * from "@urql/core";
import { isRef as u, shallowRef as a, getCurrentScope as t, provide as n, inject as s, ref as i, computed as o, watchEffect as l, unref as v, isReadonly as c, onBeforeUnmount as p, onMounted as f, getCurrentInstance as d } from "vue";
import { subscribe as h, onEnd as x, toPromise as b, take as y, filter as w, onPush as N } from "wonka";
var m = new WeakMap;
function provideClient(r) {
var s;
if (!u(r)) {
s = a(r instanceof e ? r : new e(r));
} else {
s = r;
}
var i = t();
if (i) {
m.set(i, s);
}
n("$urql", s);
return s.value;
}
function install(r, t) {
var n;
if (!u(t)) {
n = a(t instanceof e ? t : new e(t));
} else {
n = t;
}
r.provide("$urql", n);
}
function useClient() {
var e = t();
if ("production" !== process.env.NODE_ENV && !e) {
throw new Error("use* function must be called within a reactive context (component setup, composable, or effect scope).");
}
var r = s("$urql");
if (!r) {
r = m.get(e);
}
if ("production" !== process.env.NODE_ENV && !r) {
throw new Error("No urql Client was provided. Did you forget to install the plugin or call `provideClient` in a parent?");
}
return r;
}
var toValue = e => "function" == typeof e ? e() : v(e);
var createRequestWithArgs = e => {
var u = toValue(e);
return r(toValue(u.query), toValue(u.variables));
};
var useRequestState = () => ({
hasNext: i(!1),
stale: i(!1),
fetching: i(!1),
error: a(),
operation: a(),
extensions: a()
});
function useClientState(e, r, t) {
var n = a();
var s = u(e.pause) ? e.pause : "function" == typeof e.pause ? o(e.pause) : i(!!e.pause);
var v = o((() => createRequestWithArgs(e)));
var p = o((() => "requestPolicy" in e ? {
requestPolicy: toValue(e.requestPolicy),
...toValue(e.context)
} : {
...toValue(e.context)
}));
var executeRaw = e => r.value[t](v.value, {
...p.value,
...e
});
var f = l((() => {
n.value = !s.value ? executeRaw() : void 0;
}));
return {
source: n,
isPaused: s,
pause: () => {
if (!c(s)) {
s.value = !0;
}
},
resume: () => {
if (!c(s)) {
s.value = !1;
}
},
execute: e => {
n.value = executeRaw(e);
},
teardown: f
};
}
function useQuery(e) {
return callUseQuery(e);
}
function callUseQuery(e, r = useClient(), u) {
var t = a();
var {fetching: n, operation: s, extensions: i, stale: o, error: v, hasNext: c} = useRequestState();
var {isPaused: p, source: f, pause: d, resume: b, execute: y, teardown: w} = useClientState(e, r, "executeQuery");
var N = l((e => {
if (f.value) {
n.value = !0;
o.value = !1;
e(h((e => {
t.value = e.data;
o.value = !!e.stale;
n.value = !1;
v.value = e.error;
s.value = e.operation;
i.value = e.extensions;
c.value = e.hasNext;
}))(x((() => {
n.value = !1;
o.value = !1;
c.value = !1;
}))(f.value)).unsubscribe);
} else {
n.value = !1;
o.value = !1;
c.value = !1;
}
}), {
flush: "sync"
});
u && u.push(w, N);
var then = (e, r) => {
var u;
return new Promise((e => {
if (!f.value) {
return e(m);
}
var r = !1;
u = h((() => {
if (!m.fetching.value && !m.stale.value) {
if (u) {
u.unsubscribe();
}
r = !0;
e(m);
}
}))(f.value);
if (r) {
u.unsubscribe();
}
})).then(e, r);
};
var m = {
data: t,
stale: o,
error: v,
operation: s,
extensions: i,
fetching: n,
isPaused: p,
hasNext: c,
pause: d,
resume: b,
executeQuery(e) {
y(e);
return {
...m,
then
};
}
};
return {
...m,
then
};
}
function useMutation(e) {
return callUseMutation(e);
}
function callUseMutation(e, r = useClient()) {
var u = a();
var {fetching: t, operation: n, extensions: s, stale: i, error: o, hasNext: l} = useRequestState();
return {
data: u,
stale: i,
fetching: t,
error: o,
operation: n,
extensions: s,
hasNext: l,
executeMutation(a, v) {
t.value = !0;
return b(y(1)(w((e => !e.hasNext))(N((e => {
u.value = e.data;
i.value = e.stale;
t.value = !1;
o.value = e.error;
n.value = e.operation;
s.value = e.extensions;
l.value = e.hasNext;
}))(r.value.executeMutation(createRequestWithArgs({
query: e,
variables: a
}), v || {})))));
}
};
}
function useSubscription(e, r) {
return callUseSubscription(e, r);
}
function callUseSubscription(e, r, t = useClient(), n) {
var s = a();
var {fetching: i, operation: o, extensions: v, stale: c, error: p} = useRequestState();
var {isPaused: f, source: d, pause: b, resume: y, execute: w, teardown: N} = useClientState(e, t, "executeSubscription");
var m = l((e => {
if (d.value) {
i.value = !0;
e(h((e => {
i.value = !0;
p.value = e.error;
v.value = e.extensions;
c.value = !!e.stale;
o.value = e.operation;
if (null != e.data && r) {
var a = u(r) ? r.value : r;
if ("function" == typeof a) {
s.value = a(s.value, e.data);
return;
}
}
s.value = e.data;
}))(x((() => {
i.value = !1;
}))(d.value)).unsubscribe);
} else {
i.value = !1;
}
}));
n && n.push(N, m);
var C = {
data: s,
stale: c,
error: p,
operation: o,
extensions: v,
fetching: i,
isPaused: f,
pause: b,
resume: y,
executeSubscription(e) {
w(e);
return C;
}
};
return C;
}
function useClientHandle() {
var e = useClient();
var r = [];
p((() => {
var e;
while (e = r.shift()) {
e();
}
}));
var u = {
client: e.value,
useQuery: u => callUseQuery(u, e, r),
useSubscription: (u, a) => callUseSubscription(u, a, e, r),
useMutation: r => callUseMutation(r, e)
};
if ("production" !== process.env.NODE_ENV) {
f((() => {
Object.assign(u, {
useQuery(u) {
if ("production" !== process.env.NODE_ENV && !d()) {
throw new Error("`handle.useQuery()` should only be called in the `setup()` or a lifecycle hook.");
}
return callUseQuery(u, e, r);
},
useSubscription(u, a) {
if ("production" !== process.env.NODE_ENV && !d()) {
throw new Error("`handle.useSubscription()` should only be called in the `setup()` or a lifecycle hook.");
}
return callUseSubscription(u, a, e, r);
}
});
}));
}
return u;
}
export { install as default, install, provideClient, useClientHandle, useMutation, useQuery, useSubscription };
//# sourceMappingURL=urql-vue.mjs.map