765 lines
25 KiB
JavaScript
765 lines
25 KiB
JavaScript
Object.defineProperty(exports, '__esModule', { value: true });
|
||
|
||
var core = require('@urql/core');
|
||
var React = require('react');
|
||
var wonka = require('wonka');
|
||
|
||
var OBJ = {};
|
||
|
||
/** `urql`'s React Context.
|
||
*
|
||
* @remarks
|
||
* The React Context that `urql`’s {@link Client} will be provided with.
|
||
* You may use the reexported {@link Provider} to provide a `Client` as well.
|
||
*/
|
||
var Context = React.createContext(OBJ);
|
||
|
||
/** Provider for `urql`'s {@link Client} to GraphQL hooks.
|
||
*
|
||
* @remarks
|
||
* `Provider` accepts a {@link Client} and provides it to all GraphQL hooks,
|
||
* and {@link useClient}.
|
||
*
|
||
* You should make sure to create a {@link Client} and provide it with the
|
||
* `Provider` to parts of your component tree that use GraphQL hooks.
|
||
*
|
||
* @example
|
||
* ```tsx
|
||
* import { Provider } from 'urql';
|
||
* // All of `@urql/core` is also re-exported by `urql`:
|
||
* import { Client, cacheExchange, fetchExchange } from '@urql/core';
|
||
*
|
||
* const client = new Client({
|
||
* url: 'https://API',
|
||
* exchanges: [cacheExchange, fetchExchange],
|
||
* });
|
||
*
|
||
* const App = () => (
|
||
* <Provider value={client}>
|
||
* <Component />
|
||
* </Provider>
|
||
* );
|
||
* ```
|
||
*/
|
||
var Provider = Context.Provider;
|
||
|
||
/** React Consumer component, providing the {@link Client} provided on a parent component.
|
||
* @remarks
|
||
* This is an alias for {@link Context.Consumer}.
|
||
*/
|
||
var Consumer = Context.Consumer;
|
||
Context.displayName = 'UrqlContext';
|
||
|
||
/** Hook returning a {@link Client} from {@link Context}.
|
||
*
|
||
* @remarks
|
||
* `useClient` is a convenience hook, which accesses `urql`'s {@link Context}
|
||
* and returns the {@link Client} defined on it.
|
||
*
|
||
* This will be the {@link Client} you passed to a {@link Provider}
|
||
* you wrapped your elements containing this hook with.
|
||
*
|
||
* @throws
|
||
* In development, if the component you call `useClient()` in is
|
||
* not wrapped in a {@link Provider}, an error is thrown.
|
||
*/
|
||
var useClient = () => {
|
||
var client = React.useContext(Context);
|
||
if (client === OBJ && process.env.NODE_ENV !== 'production') {
|
||
var error = "No client has been specified using urql's Provider. please create a client and add a Provider.";
|
||
console.error(error);
|
||
throw new Error(error);
|
||
}
|
||
return client;
|
||
};
|
||
|
||
var initialState = {
|
||
fetching: false,
|
||
stale: false,
|
||
hasNext: false,
|
||
error: undefined,
|
||
data: undefined,
|
||
extensions: undefined,
|
||
operation: undefined
|
||
};
|
||
|
||
// Two operations are considered equal if they have the same key
|
||
var areOperationsEqual = (a, b) => {
|
||
return a === b || !!(a && b && a.key === b.key);
|
||
};
|
||
|
||
/**
|
||
* Checks if two objects are shallowly different with a special case for
|
||
* 'operation' where it compares the key if they are not the otherwise equal
|
||
*/
|
||
var isShallowDifferent = (a, b) => {
|
||
for (var key in a) if (!(key in b)) return true;
|
||
for (var _key in b) {
|
||
if (_key === 'operation' ? !areOperationsEqual(a[_key], b[_key]) : a[_key] !== b[_key]) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
};
|
||
var computeNextState = (prevState, result) => {
|
||
var newState = {
|
||
...prevState,
|
||
...result,
|
||
data: result.data !== undefined || result.error ? result.data : prevState.data,
|
||
fetching: !!result.fetching,
|
||
stale: !!result.stale
|
||
};
|
||
return isShallowDifferent(prevState, newState) ? newState : prevState;
|
||
};
|
||
var hasDepsChanged = (a, b) => {
|
||
for (var i = 0, l = b.length; i < l; i++) if (a[i] !== b[i]) return true;
|
||
return false;
|
||
};
|
||
var reactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
||
function deferDispatch(setState, value) {
|
||
if (process.env.NODE_ENV !== 'production' && !!reactSharedInternals && !!reactSharedInternals.ReactCurrentOwner && !!reactSharedInternals.ReactCurrentOwner.current) {
|
||
Promise.resolve(value).then(setState);
|
||
} else {
|
||
setState(value);
|
||
}
|
||
}
|
||
|
||
/** State of the last mutation executed by your {@link useMutation} hook.
|
||
*
|
||
* @remarks
|
||
* `UseMutationState` is returned (in a tuple) by {@link useMutation} and
|
||
* gives you the {@link OperationResult} of the last mutation executed
|
||
* with {@link UseMutationExecute}.
|
||
*
|
||
* Even if the mutation document passed to {@link useMutation} changes,
|
||
* the state isn’t reset, so you can keep displaying the previous result.
|
||
*/
|
||
|
||
/** Triggers {@link useMutation} to execute its GraphQL mutation operation.
|
||
*
|
||
* @param variables - variables using which the mutation will be executed.
|
||
* @param context - optionally, context options that will be merged with the hook's
|
||
* {@link UseQueryArgs.context} options and the `Client`’s options.
|
||
* @returns the {@link OperationResult} of the mutation.
|
||
*
|
||
* @remarks
|
||
* When called, {@link useMutation} will start the GraphQL mutation
|
||
* it currently holds and use the `variables` passed to it.
|
||
*
|
||
* Once the mutation response comes back from the API, its
|
||
* returned promise will resolve to the mutation’s {@link OperationResult}
|
||
* and the {@link UseMutationState} will be updated with the result.
|
||
*
|
||
* @example
|
||
* ```ts
|
||
* const [result, executeMutation] = useMutation(UpdateTodo);
|
||
* const start = async ({ id, title }) => {
|
||
* const result = await executeMutation({ id, title });
|
||
* };
|
||
*/
|
||
|
||
/** Result tuple returned by the {@link useMutation} hook.
|
||
*
|
||
* @remarks
|
||
* Similarly to a `useState` hook’s return value,
|
||
* the first element is the {@link useMutation}’s state, updated
|
||
* as mutations are executed with the second value, which is
|
||
* used to start mutations and is a {@link UseMutationExecute}
|
||
* function.
|
||
*/
|
||
|
||
/** Hook to create a GraphQL mutation, run by passing variables to the returned execute function.
|
||
*
|
||
* @param query - a GraphQL mutation document which `useMutation` will execute.
|
||
* @returns a {@link UseMutationResponse} tuple of a {@link UseMutationState} result,
|
||
* and an execute function to start the mutation.
|
||
*
|
||
* @remarks
|
||
* `useMutation` allows GraphQL mutations to be defined and keeps its state
|
||
* after the mutation is started with the returned execute function.
|
||
*
|
||
* Given a GraphQL mutation document it returns state to keep track of the
|
||
* mutation state and a {@link UseMutationExecute} function, which accepts
|
||
* variables for the mutation to be executed.
|
||
* Once called, the mutation executes and the state will be updated with
|
||
* the mutation’s result.
|
||
*
|
||
* @see {@link https://urql.dev/goto/urql/docs/basics/react-preact/#mutations} for `useMutation` docs.
|
||
*
|
||
* @example
|
||
* ```ts
|
||
* import { gql, useMutation } from 'urql';
|
||
*
|
||
* const UpdateTodo = gql`
|
||
* mutation ($id: ID!, $title: String!) {
|
||
* updateTodo(id: $id, title: $title) {
|
||
* id, title
|
||
* }
|
||
* }
|
||
* `;
|
||
*
|
||
* const UpdateTodo = () => {
|
||
* const [result, executeMutation] = useMutation(UpdateTodo);
|
||
* const start = async ({ id, title }) => {
|
||
* const result = await executeMutation({ id, title });
|
||
* };
|
||
* // ...
|
||
* };
|
||
* ```
|
||
*/
|
||
function useMutation(query) {
|
||
var isMounted = React.useRef(true);
|
||
var client = useClient();
|
||
var [state, setState] = React.useState(initialState);
|
||
var executeMutation = React.useCallback((variables, context) => {
|
||
deferDispatch(setState, {
|
||
...initialState,
|
||
fetching: true
|
||
});
|
||
return wonka.toPromise(wonka.take(1)(wonka.filter(result => !result.hasNext)(wonka.onPush(result => {
|
||
if (isMounted.current) {
|
||
deferDispatch(setState, {
|
||
fetching: false,
|
||
stale: result.stale,
|
||
data: result.data,
|
||
error: result.error,
|
||
extensions: result.extensions,
|
||
operation: result.operation,
|
||
hasNext: result.hasNext
|
||
});
|
||
}
|
||
})(client.executeMutation(core.createRequest(query, variables), context || {})))));
|
||
},
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
[client, query, setState]);
|
||
React.useEffect(() => {
|
||
isMounted.current = true;
|
||
return () => {
|
||
isMounted.current = false;
|
||
};
|
||
}, []);
|
||
return [state, executeMutation];
|
||
}
|
||
|
||
/** Creates a request from a query and variables but preserves reference equality if the key isn't changing
|
||
* @internal
|
||
*/
|
||
function useRequest(query, variables) {
|
||
var prev = React.useRef(undefined);
|
||
return React.useMemo(() => {
|
||
var request = core.createRequest(query, variables);
|
||
// We manually ensure reference equality if the key hasn't changed
|
||
if (prev.current !== undefined && prev.current.key === request.key) {
|
||
return prev.current;
|
||
} else {
|
||
prev.current = request;
|
||
return request;
|
||
}
|
||
}, [query, variables]);
|
||
}
|
||
|
||
var getCacheForClient = client => {
|
||
if (!client._react) {
|
||
var reclaim = new Set();
|
||
var map = new Map();
|
||
if (client.operations$ /* not available in mocks */) {
|
||
wonka.subscribe(operation => {
|
||
if (operation.kind === 'teardown' && reclaim.has(operation.key)) {
|
||
reclaim.delete(operation.key);
|
||
map.delete(operation.key);
|
||
}
|
||
})(client.operations$);
|
||
}
|
||
client._react = {
|
||
get(key) {
|
||
return map.get(key);
|
||
},
|
||
set(key, value) {
|
||
reclaim.delete(key);
|
||
map.set(key, value);
|
||
},
|
||
dispose(key) {
|
||
reclaim.add(key);
|
||
}
|
||
};
|
||
}
|
||
return client._react;
|
||
};
|
||
|
||
/* eslint-disable react-hooks/exhaustive-deps */
|
||
|
||
|
||
/** Input arguments for the {@link useQuery} hook.
|
||
*
|
||
* @param query - The GraphQL query that `useQuery` executes.
|
||
* @param variables - The variables for the GraphQL query that `useQuery` executes.
|
||
*/
|
||
|
||
/** State of the current query, your {@link useQuery} hook is executing.
|
||
*
|
||
* @remarks
|
||
* `UseQueryState` is returned (in a tuple) by {@link useQuery} and
|
||
* gives you the updating {@link OperationResult} of GraphQL queries.
|
||
*
|
||
* Even when the query and variables passed to {@link useQuery} change,
|
||
* this state preserves the prior state and sets the `fetching` flag to
|
||
* `true`.
|
||
* This allows you to display the previous state, while implementing
|
||
* a separate loading indicator separately.
|
||
*/
|
||
|
||
/** Triggers {@link useQuery} to execute a new GraphQL query operation.
|
||
*
|
||
* @param opts - optionally, context options that will be merged with the hook's
|
||
* {@link UseQueryArgs.context} options and the `Client`’s options.
|
||
*
|
||
* @remarks
|
||
* When called, {@link useQuery} will re-execute the GraphQL query operation
|
||
* it currently holds, even if {@link UseQueryArgs.pause} is set to `true`.
|
||
*
|
||
* This is useful for executing a paused query or re-executing a query
|
||
* and get a new network result, by passing a new request policy.
|
||
*
|
||
* ```ts
|
||
* const [result, reexecuteQuery] = useQuery({ query });
|
||
*
|
||
* const refresh = () => {
|
||
* // Re-execute the query with a network-only policy, skipping the cache
|
||
* reexecuteQuery({ requestPolicy: 'network-only' });
|
||
* };
|
||
* ```
|
||
*/
|
||
|
||
/** Result tuple returned by the {@link useQuery} hook.
|
||
*
|
||
* @remarks
|
||
* Similarly to a `useState` hook’s return value,
|
||
* the first element is the {@link useQuery}’s result and state,
|
||
* a {@link UseQueryState} object,
|
||
* and the second is used to imperatively re-execute the query
|
||
* via a {@link UseQueryExecute} function.
|
||
*/
|
||
|
||
var isSuspense = (client, context) => context && context.suspense !== undefined ? !!context.suspense : client.suspense;
|
||
|
||
/** Hook to run a GraphQL query and get updated GraphQL results.
|
||
*
|
||
* @param args - a {@link UseQueryArgs} object, to pass a `query`, `variables`, and options.
|
||
* @returns a {@link UseQueryResponse} tuple of a {@link UseQueryState} result, and re-execute function.
|
||
*
|
||
* @remarks
|
||
* `useQuery` allows GraphQL queries to be defined and executed.
|
||
* Given {@link UseQueryArgs.query}, it executes the GraphQL query with the
|
||
* context’s {@link Client}.
|
||
*
|
||
* The returned result updates when the `Client` has new results
|
||
* for the query, and changes when your input `args` change.
|
||
*
|
||
* Additionally, if the `suspense` option is enabled on the `Client`,
|
||
* the `useQuery` hook will suspend instead of indicating that it’s
|
||
* waiting for a result via {@link UseQueryState.fetching}.
|
||
*
|
||
* @see {@link https://urql.dev/goto/urql/docs/basics/react-preact/#queries} for `useQuery` docs.
|
||
*
|
||
* @example
|
||
* ```ts
|
||
* import { gql, useQuery } from 'urql';
|
||
*
|
||
* const TodosQuery = gql`
|
||
* query { todos { id, title } }
|
||
* `;
|
||
*
|
||
* const Todos = () => {
|
||
* const [result, reexecuteQuery] = useQuery({
|
||
* query: TodosQuery,
|
||
* variables: {},
|
||
* });
|
||
* // ...
|
||
* };
|
||
* ```
|
||
*/
|
||
function useQuery(args) {
|
||
var client = useClient();
|
||
var cache = getCacheForClient(client);
|
||
var suspense = isSuspense(client, args.context);
|
||
var request = useRequest(args.query, args.variables);
|
||
var source = React.useMemo(() => {
|
||
if (args.pause) return null;
|
||
var source = client.executeQuery(request, {
|
||
requestPolicy: args.requestPolicy,
|
||
...args.context
|
||
});
|
||
return suspense ? wonka.onPush(result => {
|
||
cache.set(request.key, result);
|
||
})(source) : source;
|
||
}, [cache, client, request, suspense, args.pause, args.requestPolicy, args.context]);
|
||
var getSnapshot = React.useCallback((source, suspense) => {
|
||
if (!source) return {
|
||
fetching: false
|
||
};
|
||
var result = cache.get(request.key);
|
||
if (!result) {
|
||
var resolve;
|
||
var subscription = wonka.subscribe(_result => {
|
||
result = _result;
|
||
if (resolve) resolve(result);
|
||
})(wonka.takeWhile(() => suspense && !resolve || !result || 'hasNext' in result && result.hasNext)(source));
|
||
if (result == null && suspense) {
|
||
var promise = new Promise(_resolve => {
|
||
resolve = _resolve;
|
||
});
|
||
cache.set(request.key, promise);
|
||
throw promise;
|
||
} else {
|
||
subscription.unsubscribe();
|
||
}
|
||
} else if (suspense && result != null && 'then' in result) {
|
||
throw result;
|
||
}
|
||
return result || {
|
||
fetching: true
|
||
};
|
||
}, [cache, request]);
|
||
var deps = [client, request, args.requestPolicy, args.context, args.pause];
|
||
var [state, setState] = React.useState(() => [source, computeNextState(initialState, getSnapshot(source, suspense)), deps]);
|
||
var currentResult = state[1];
|
||
if (source !== state[0] && hasDepsChanged(state[2], deps)) {
|
||
setState([source, currentResult = computeNextState(state[1], getSnapshot(source, suspense)), deps]);
|
||
}
|
||
React.useEffect(() => {
|
||
var source = state[0];
|
||
var request = state[2][1];
|
||
var hasResult = false;
|
||
var updateResult = result => {
|
||
hasResult = true;
|
||
deferDispatch(setState, state => {
|
||
var nextResult = computeNextState(state[1], result);
|
||
return state[1] !== nextResult ? [state[0], nextResult, state[2]] : state;
|
||
});
|
||
};
|
||
if (source) {
|
||
var subscription = wonka.subscribe(updateResult)(wonka.onEnd(() => {
|
||
updateResult({
|
||
fetching: false
|
||
});
|
||
})(source));
|
||
if (!hasResult) updateResult({
|
||
fetching: true
|
||
});
|
||
return () => {
|
||
cache.dispose(request.key);
|
||
subscription.unsubscribe();
|
||
};
|
||
} else {
|
||
updateResult({
|
||
fetching: false
|
||
});
|
||
}
|
||
}, [cache, state[0], state[2][1]]);
|
||
var executeQuery = React.useCallback(opts => {
|
||
var context = {
|
||
requestPolicy: args.requestPolicy,
|
||
...args.context,
|
||
...opts
|
||
};
|
||
deferDispatch(setState, state => {
|
||
var source = suspense ? wonka.onPush(result => {
|
||
cache.set(request.key, result);
|
||
})(client.executeQuery(request, context)) : client.executeQuery(request, context);
|
||
return [source, state[1], deps];
|
||
});
|
||
}, [client, cache, request, suspense, args.requestPolicy, args.context, args.pause]);
|
||
return [currentResult, executeQuery];
|
||
}
|
||
|
||
/* eslint-disable react-hooks/exhaustive-deps */
|
||
|
||
|
||
/** Input arguments for the {@link useSubscription} hook.
|
||
*
|
||
* @param query - The GraphQL subscription document that `useSubscription` executes.
|
||
* @param variables - The variables for the GraphQL subscription that `useSubscription` executes.
|
||
*/
|
||
|
||
/** Combines previous data with an incoming subscription result’s data.
|
||
*
|
||
* @remarks
|
||
* A `SubscriptionHandler` may be passed to {@link useSubscription} to
|
||
* aggregate subscription results into a combined {@link UseSubscriptionState.data}
|
||
* value.
|
||
*
|
||
* This is useful when a subscription event delivers a single item, while
|
||
* you’d like to display a list of events.
|
||
*
|
||
* @example
|
||
* ```ts
|
||
* const NotificationsSubscription = gql`
|
||
* subscription { newNotification { id, text } }
|
||
* `;
|
||
*
|
||
* const combineNotifications = (notifications = [], data) => {
|
||
* return [...notifications, data.newNotification];
|
||
* };
|
||
*
|
||
* const [result, executeSubscription] = useSubscription(
|
||
* { query: NotificationsSubscription },
|
||
* combineNotifications,
|
||
* );
|
||
* ```
|
||
*/
|
||
|
||
/** State of the current subscription, your {@link useSubscription} hook is executing.
|
||
*
|
||
* @remarks
|
||
* `UseSubscriptionState` is returned (in a tuple) by {@link useSubscription} and
|
||
* gives you the updating {@link OperationResult} of GraphQL subscriptions.
|
||
*
|
||
* If a {@link SubscriptionHandler} has been passed to `useSubscription` then
|
||
* {@link UseSubscriptionState.data} is instead the updated data as returned
|
||
* by the handler, otherwise it’s the latest result’s data.
|
||
*
|
||
* Hint: Even when the query and variables passed to {@link useSubscription} change,
|
||
* this state preserves the prior state.
|
||
*/
|
||
|
||
/** Triggers {@link useSubscription} to reexecute a GraphQL subscription operation.
|
||
*
|
||
* @param opts - optionally, context options that will be merged with the hook's
|
||
* {@link UseSubscriptionArgs.context} options and the `Client`’s options.
|
||
*
|
||
* @remarks
|
||
* When called, {@link useSubscription} will restart the GraphQL subscription
|
||
* operation it currently holds. If {@link UseSubscriptionArgs.pause} is set
|
||
* to `true`, it will start executing the subscription.
|
||
*
|
||
* ```ts
|
||
* const [result, executeSubscription] = useSubscription({
|
||
* query,
|
||
* pause: true,
|
||
* });
|
||
*
|
||
* const start = () => {
|
||
* executeSubscription();
|
||
* };
|
||
* ```
|
||
*/
|
||
|
||
/** Result tuple returned by the {@link useSubscription} hook.
|
||
*
|
||
* @remarks
|
||
* Similarly to a `useState` hook’s return value,
|
||
* the first element is the {@link useSubscription}’s state,
|
||
* a {@link UseSubscriptionState} object,
|
||
* and the second is used to imperatively re-execute or start the subscription
|
||
* via a {@link UseMutationExecute} function.
|
||
*/
|
||
|
||
/** Hook to run a GraphQL subscription and get updated GraphQL results.
|
||
*
|
||
* @param args - a {@link UseSubscriptionArgs} object, to pass a `query`, `variables`, and options.
|
||
* @param handler - optionally, a {@link SubscriptionHandler} function to combine multiple subscription results.
|
||
* @returns a {@link UseSubscriptionResponse} tuple of a {@link UseSubscriptionState} result, and an execute function.
|
||
*
|
||
* @remarks
|
||
* `useSubscription` allows GraphQL subscriptions to be defined and executed.
|
||
* Given {@link UseSubscriptionArgs.query}, it executes the GraphQL subscription with the
|
||
* context’s {@link Client}.
|
||
*
|
||
* The returned result updates when the `Client` has new results
|
||
* for the subscription, and `data` is updated with the result’s data
|
||
* or with the `data` that a `handler` returns.
|
||
*
|
||
* @example
|
||
* ```ts
|
||
* import { gql, useSubscription } from 'urql';
|
||
*
|
||
* const NotificationsSubscription = gql`
|
||
* subscription { newNotification { id, text } }
|
||
* `;
|
||
*
|
||
* const combineNotifications = (notifications = [], data) => {
|
||
* return [...notifications, data.newNotification];
|
||
* };
|
||
*
|
||
* const Notifications = () => {
|
||
* const [result, executeSubscription] = useSubscription(
|
||
* { query: NotificationsSubscription },
|
||
* combineNotifications,
|
||
* );
|
||
* // ...
|
||
* };
|
||
* ```
|
||
*/
|
||
function useSubscription(args, handler) {
|
||
var client = useClient();
|
||
var request = useRequest(args.query, args.variables);
|
||
var handlerRef = React.useRef(handler);
|
||
handlerRef.current = handler;
|
||
var source = React.useMemo(() => !args.pause ? client.executeSubscription(request, args.context) : null, [client, request, args.pause, args.context]);
|
||
var deps = [client, request, args.context, args.pause];
|
||
var [state, setState] = React.useState(() => [source, {
|
||
...initialState,
|
||
fetching: !!source
|
||
}, deps]);
|
||
var currentResult = state[1];
|
||
if (source !== state[0] && hasDepsChanged(state[2], deps)) {
|
||
setState([source, currentResult = computeNextState(state[1], {
|
||
fetching: !!source
|
||
}), deps]);
|
||
}
|
||
React.useEffect(() => {
|
||
var updateResult = result => {
|
||
deferDispatch(setState, state => {
|
||
var nextResult = computeNextState(state[1], result);
|
||
if (state[1] === nextResult) return state;
|
||
if (handlerRef.current && nextResult.data != null && state[1].data !== nextResult.data) {
|
||
nextResult.data = handlerRef.current(state[1].data, nextResult.data);
|
||
}
|
||
return [state[0], nextResult, state[2]];
|
||
});
|
||
};
|
||
if (state[0]) {
|
||
return wonka.subscribe(updateResult)(wonka.onEnd(() => {
|
||
updateResult({
|
||
fetching: !!source
|
||
});
|
||
})(state[0])).unsubscribe;
|
||
} else {
|
||
updateResult({
|
||
fetching: false
|
||
});
|
||
}
|
||
}, [state[0]]);
|
||
|
||
// This is the imperative execute function passed to the user
|
||
var executeSubscription = React.useCallback(opts => {
|
||
var source = client.executeSubscription(request, {
|
||
...args.context,
|
||
...opts
|
||
});
|
||
deferDispatch(setState, state => [source, state[1], deps]);
|
||
}, [client, request, args.context, args.pause]);
|
||
return [currentResult, executeSubscription];
|
||
}
|
||
|
||
/** Props accepted by {@link Mutation}.
|
||
*
|
||
* @remarks
|
||
* `MutationProps` are the props accepted by the {@link Mutation} component.
|
||
*
|
||
* The result, the {@link MutationState} object, will be passed to
|
||
* a {@link MutationProps.children} function, passed as children
|
||
* to the `Mutation` component.
|
||
*/
|
||
|
||
/** Object that {@link MutationProps.children} is called with.
|
||
*
|
||
* @remarks
|
||
* This is an extented {@link UseMutationstate} with an added
|
||
* {@link MutationState.executeMutation} method, which is usually
|
||
* part of a tuple returned by {@link useMutation}.
|
||
*/
|
||
|
||
/** Component Wrapper around {@link useMutation} to run a GraphQL query.
|
||
*
|
||
* @remarks
|
||
* `Mutation` is a component wrapper around the {@link useMutation} hook
|
||
* that calls the {@link MutationProps.children} prop, as a function,
|
||
* with the {@link MutationState} object.
|
||
*/
|
||
function Mutation(props) {
|
||
var mutation = useMutation(props.query);
|
||
return props.children({
|
||
...mutation[0],
|
||
executeMutation: mutation[1]
|
||
});
|
||
}
|
||
|
||
/** Props accepted by {@link Query}.
|
||
*
|
||
* @remarks
|
||
* `QueryProps` are the props accepted by the {@link Query} component,
|
||
* which is identical to {@link UseQueryArgs}.
|
||
*
|
||
* The result, the {@link QueryState} object, will be passed to
|
||
* a {@link QueryProps.children} function, passed as children
|
||
* to the `Query` component.
|
||
*/
|
||
|
||
/** Object that {@link QueryProps.children} is called with.
|
||
*
|
||
* @remarks
|
||
* This is an extented {@link UseQueryState} with an added
|
||
* {@link QueryState.executeQuery} method, which is usually
|
||
* part of a tuple returned by {@link useQuery}.
|
||
*/
|
||
|
||
/** Component Wrapper around {@link useQuery} to run a GraphQL query.
|
||
*
|
||
* @remarks
|
||
* `Query` is a component wrapper around the {@link useQuery} hook
|
||
* that calls the {@link QueryProps.children} prop, as a function,
|
||
* with the {@link QueryState} object.
|
||
*/
|
||
function Query(props) {
|
||
var query = useQuery(props);
|
||
return props.children({
|
||
...query[0],
|
||
executeQuery: query[1]
|
||
});
|
||
}
|
||
|
||
/** Props accepted by {@link Subscription}.
|
||
*
|
||
* @remarks
|
||
* `SubscriptionProps` are the props accepted by the {@link Subscription} component,
|
||
* which is identical to {@link UseSubscriptionArgs} with an added
|
||
* {@link SubscriptionProps.handler} prop, which {@link useSubscription} usually
|
||
* accepts as an additional argument.
|
||
*
|
||
* The result, the {@link SubscriptionState} object, will be passed to
|
||
* a {@link SubscriptionProps.children} function, passed as children
|
||
* to the `Subscription` component.
|
||
*/
|
||
|
||
/** Object that {@link SubscriptionProps.children} is called with.
|
||
*
|
||
* @remarks
|
||
* This is an extented {@link UseSubscriptionState} with an added
|
||
* {@link SubscriptionState.executeSubscription} method, which is usually
|
||
* part of a tuple returned by {@link useSubscription}.
|
||
*/
|
||
|
||
/** Component Wrapper around {@link useSubscription} to run a GraphQL subscription.
|
||
*
|
||
* @remarks
|
||
* `Subscription` is a component wrapper around the {@link useSubscription} hook
|
||
* that calls the {@link SubscriptionProps.children} prop, as a function,
|
||
* with the {@link SubscriptionState} object.
|
||
*/
|
||
function Subscription(props) {
|
||
var subscription = useSubscription(props, props.handler);
|
||
return props.children({
|
||
...subscription[0],
|
||
executeSubscription: subscription[1]
|
||
});
|
||
}
|
||
|
||
exports.Consumer = Consumer;
|
||
exports.Context = Context;
|
||
exports.Mutation = Mutation;
|
||
exports.Provider = Provider;
|
||
exports.Query = Query;
|
||
exports.Subscription = Subscription;
|
||
exports.useClient = useClient;
|
||
exports.useMutation = useMutation;
|
||
exports.useQuery = useQuery;
|
||
exports.useSubscription = useSubscription;
|
||
Object.keys(core).forEach(function (k) {
|
||
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
||
enumerable: true,
|
||
get: function () { return core[k]; }
|
||
});
|
||
});
|
||
//# sourceMappingURL=urql.js.map
|