@apollo/client 3.9.0-rc.0 → 3.9.0
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/CHANGELOG.md +158 -170
- package/README.md +4 -0
- package/apollo-client.cjs +3 -2
- package/apollo-client.cjs.map +1 -1
- package/apollo-client.min.cjs +1 -1
- package/cache/core/types/DataProxy.d.ts +8 -16
- package/cache/core/types/DataProxy.js.map +1 -1
- package/cache/inmemory/types.d.ts +0 -1
- package/cache/inmemory/types.js.map +1 -1
- package/cache/inmemory/writeToStore.js.map +1 -1
- package/core/ApolloClient.d.ts +6 -1
- package/core/ApolloClient.js.map +1 -1
- package/core/ObservableQuery.d.ts +22 -0
- package/core/ObservableQuery.js +22 -0
- package/core/ObservableQuery.js.map +1 -1
- package/core/core.cjs +1 -1
- package/core/core.cjs.map +1 -1
- package/core/core.cjs.native.js +1 -1
- package/core/types.d.ts +5 -2
- package/core/types.js.map +1 -1
- package/core/watchQueryOptions.d.ts +258 -128
- package/core/watchQueryOptions.js.map +1 -1
- package/dev/dev.cjs +2 -2
- package/dev/dev.cjs.map +1 -1
- package/dev/dev.cjs.native.js +2 -2
- package/invariantErrorCodes.js +1 -1
- package/package.json +18 -18
- package/react/components/types.d.ts +3 -0
- package/react/components/types.js.map +1 -1
- package/react/hooks/hooks.cjs.map +1 -1
- package/react/hooks/useApolloClient.d.ts +15 -0
- package/react/hooks/useApolloClient.js +15 -0
- package/react/hooks/useApolloClient.js.map +1 -1
- package/react/hooks/useLazyQuery.d.ts +35 -0
- package/react/hooks/useLazyQuery.js +35 -0
- package/react/hooks/useLazyQuery.js.map +1 -1
- package/react/hooks/useLoadableQuery.d.ts +69 -2
- package/react/hooks/useLoadableQuery.js.map +1 -1
- package/react/hooks/useMutation.d.ts +47 -0
- package/react/hooks/useMutation.js +47 -0
- package/react/hooks/useMutation.js.map +1 -1
- package/react/hooks/useQuery.d.ts +34 -0
- package/react/hooks/useQuery.js +34 -0
- package/react/hooks/useQuery.js.map +1 -1
- package/react/hooks/useQueryRefHandlers.d.ts +5 -4
- package/react/hooks/useQueryRefHandlers.js +1 -1
- package/react/hooks/useQueryRefHandlers.js.map +1 -1
- package/react/hooks/useReactiveVar.d.ts +17 -0
- package/react/hooks/useReactiveVar.js +17 -0
- package/react/hooks/useReactiveVar.js.map +1 -1
- package/react/hooks/useSubscription.d.ts +85 -0
- package/react/hooks/useSubscription.js +85 -0
- package/react/hooks/useSubscription.js.map +1 -1
- package/react/internal/cache/QueryReference.d.ts +39 -0
- package/react/internal/cache/QueryReference.js +2 -1
- package/react/internal/cache/QueryReference.js.map +1 -1
- package/react/internal/internal.cjs +2 -1
- package/react/internal/internal.cjs.map +1 -1
- package/react/internal/internal.cjs.native.js +2 -1
- package/react/query-preloader/createQueryPreloader.d.ts +84 -52
- package/react/query-preloader/createQueryPreloader.js +5 -2
- package/react/query-preloader/createQueryPreloader.js.map +1 -1
- package/react/react.cjs.map +1 -1
- package/react/types/types.d.ts +552 -57
- package/react/types/types.documentation.d.ts +559 -0
- package/react/types/types.documentation.js +2 -0
- package/react/types/types.documentation.js.map +1 -0
- package/react/types/types.js.map +1 -1
- package/utilities/globals/globals.cjs +1 -1
- package/utilities/globals/globals.cjs.map +1 -1
- package/utilities/globals/globals.cjs.native.js +1 -1
- package/utilities/graphql/DocumentTransform.d.ts +12 -0
- package/utilities/graphql/DocumentTransform.js.map +1 -1
- package/version.js +1 -1
- package/.changeset/beige-geese-wink.md +0 -5
- package/.changeset/breezy-spiders-tap.md +0 -38
- package/.changeset/chatty-comics-yawn.md +0 -8
- package/.changeset/clean-items-smash.md +0 -5
- package/.changeset/cold-llamas-turn.md +0 -8
- package/.changeset/curvy-seas-hope.md +0 -13
- package/.changeset/dirty-kids-crash.md +0 -5
- package/.changeset/dirty-tigers-matter.md +0 -13
- package/.changeset/forty-cups-shop.md +0 -5
- package/.changeset/friendly-clouds-laugh.md +0 -7
- package/.changeset/hot-ducks-burn.md +0 -5
- package/.changeset/late-rabbits-protect.md +0 -7
- package/.changeset/mighty-coats-check.md +0 -47
- package/.changeset/pink-apricots-yawn.md +0 -5
- package/.changeset/polite-avocados-warn.md +0 -5
- package/.changeset/pre.json +0 -44
- package/.changeset/quick-hats-marry.md +0 -5
- package/.changeset/rare-snakes-melt.md +0 -24
- package/.changeset/shaggy-ears-scream.md +0 -5
- package/.changeset/shaggy-sheep-pull.md +0 -5
- package/.changeset/sixty-boxes-rest.md +0 -8
- package/.changeset/smooth-plums-shout.md +0 -5
- package/.changeset/sour-sheep-walk.md +0 -7
- package/.changeset/spicy-drinks-camp.md +0 -5
- package/.changeset/strong-terms-perform.md +0 -46
- package/.changeset/swift-zoos-collect.md +0 -19
- package/.changeset/thick-mice-collect.md +0 -5
- package/.changeset/thick-tips-cry.md +0 -9
- package/.changeset/thirty-ties-arrive.md +0 -26
- package/.changeset/tough-timers-begin.md +0 -8
- package/.changeset/unlucky-rats-decide.md +0 -5
- package/.changeset/violet-lions-draw.md +0 -5
- package/.changeset/wet-forks-rhyme.md +0 -5
- package/.changeset/wild-dolphins-jog.md +0 -5
- package/.changeset/wise-news-grab.md +0 -7
- package/.changeset/yellow-flies-repeat.md +0 -5
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import { invariant } from "../../utilities/globals/index.js";
|
|
2
2
|
import * as React from "rehackt";
|
|
3
3
|
import { getApolloContext } from "../context/index.js";
|
|
4
|
+
/**
|
|
5
|
+
* @example
|
|
6
|
+
* ```jsx
|
|
7
|
+
* import { useApolloClient } from '@apollo/client';
|
|
8
|
+
*
|
|
9
|
+
* function SomeComponent() {
|
|
10
|
+
* const client = useApolloClient();
|
|
11
|
+
* // `client` is now set to the `ApolloClient` instance being used by the
|
|
12
|
+
* // application (that was configured using something like `ApolloProvider`)
|
|
13
|
+
* }
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
* @since 3.0.0
|
|
17
|
+
* @returns The `ApolloClient` instance being used by the application.
|
|
18
|
+
*/
|
|
4
19
|
export function useApolloClient(override) {
|
|
5
20
|
var context = React.useContext(getApolloContext());
|
|
6
21
|
var client = override || context.client;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useApolloClient.js","sourceRoot":"","sources":["../../../src/react/hooks/useApolloClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,UAAU,eAAe,CAC7B,QAA+B;IAE/B,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACrD,IAAM,MAAM,GAAG,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC;IAC1C,SAAS,CACP,CAAC,CAAC,MAAM,EACR,oEAAoE;QAClE,0EAA0E;QAC1E,0BAA0B,CAC7B,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import { invariant } from \"../../utilities/globals/index.js\";\nimport * as React from \"rehackt\";\nimport type { ApolloClient } from \"../../core/index.js\";\nimport { getApolloContext } from \"../context/index.js\";\n\nexport function useApolloClient(\n override?: ApolloClient<object>\n): ApolloClient<object> {\n const context = React.useContext(getApolloContext());\n const client = override || context.client;\n invariant(\n !!client,\n 'Could not find \"client\" in the context or passed in as an option. ' +\n \"Wrap the root component in an <ApolloProvider>, or pass an ApolloClient \" +\n \"instance in via options.\"\n );\n\n return client;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"useApolloClient.js","sourceRoot":"","sources":["../../../src/react/hooks/useApolloClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,eAAe,CAC7B,QAA+B;IAE/B,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACrD,IAAM,MAAM,GAAG,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC;IAC1C,SAAS,CACP,CAAC,CAAC,MAAM,EACR,oEAAoE;QAClE,0EAA0E;QAC1E,0BAA0B,CAC7B,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import { invariant } from \"../../utilities/globals/index.js\";\nimport * as React from \"rehackt\";\nimport type { ApolloClient } from \"../../core/index.js\";\nimport { getApolloContext } from \"../context/index.js\";\n\n/**\n * @example\n * ```jsx\n * import { useApolloClient } from '@apollo/client';\n *\n * function SomeComponent() {\n * const client = useApolloClient();\n * // `client` is now set to the `ApolloClient` instance being used by the\n * // application (that was configured using something like `ApolloProvider`)\n * }\n * ```\n *\n * @since 3.0.0\n * @returns The `ApolloClient` instance being used by the application.\n */\nexport function useApolloClient(\n override?: ApolloClient<object>\n): ApolloClient<object> {\n const context = React.useContext(getApolloContext());\n const client = override || context.client;\n invariant(\n !!client,\n 'Could not find \"client\" in the context or passed in as an option. ' +\n \"Wrap the root component in an <ApolloProvider>, or pass an ApolloClient \" +\n \"instance in via options.\"\n );\n\n return client;\n}\n"]}
|
|
@@ -2,5 +2,40 @@ import type { DocumentNode } from "graphql";
|
|
|
2
2
|
import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
|
|
3
3
|
import type { OperationVariables } from "../../core/index.js";
|
|
4
4
|
import type { LazyQueryHookOptions, LazyQueryResultTuple, NoInfer } from "../types/types.js";
|
|
5
|
+
/**
|
|
6
|
+
* A hook for imperatively executing queries in an Apollo application, e.g. in response to user interaction.
|
|
7
|
+
*
|
|
8
|
+
* > Refer to the [Queries - Manual execution with useLazyQuery](https://www.apollographql.com/docs/react/data/queries#manual-execution-with-uselazyquery) section for a more in-depth overview of `useLazyQuery`.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```jsx
|
|
12
|
+
* import { gql, useLazyQuery } from "@apollo/client";
|
|
13
|
+
*
|
|
14
|
+
* const GET_GREETING = gql`
|
|
15
|
+
* query GetGreeting($language: String!) {
|
|
16
|
+
* greeting(language: $language) {
|
|
17
|
+
* message
|
|
18
|
+
* }
|
|
19
|
+
* }
|
|
20
|
+
* `;
|
|
21
|
+
*
|
|
22
|
+
* function Hello() {
|
|
23
|
+
* const [loadGreeting, { called, loading, data }] = useLazyQuery(
|
|
24
|
+
* GET_GREETING,
|
|
25
|
+
* { variables: { language: "english" } }
|
|
26
|
+
* );
|
|
27
|
+
* if (called && loading) return <p>Loading ...</p>
|
|
28
|
+
* if (!called) {
|
|
29
|
+
* return <button onClick={() => loadGreeting()}>Load greeting</button>
|
|
30
|
+
* }
|
|
31
|
+
* return <h1>Hello {data.greeting.message}!</h1>;
|
|
32
|
+
* }
|
|
33
|
+
* ```
|
|
34
|
+
* @since 3.0.0
|
|
35
|
+
*
|
|
36
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
37
|
+
* @param options - Default options to control how the query is executed.
|
|
38
|
+
* @returns A tuple in the form of `[execute, result]`
|
|
39
|
+
*/
|
|
5
40
|
export declare function useLazyQuery<TData = any, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: LazyQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>): LazyQueryResultTuple<TData, TVariables>;
|
|
6
41
|
//# sourceMappingURL=useLazyQuery.d.ts.map
|
|
@@ -13,6 +13,41 @@ var EAGER_METHODS = [
|
|
|
13
13
|
"startPolling",
|
|
14
14
|
"subscribeToMore",
|
|
15
15
|
];
|
|
16
|
+
/**
|
|
17
|
+
* A hook for imperatively executing queries in an Apollo application, e.g. in response to user interaction.
|
|
18
|
+
*
|
|
19
|
+
* > Refer to the [Queries - Manual execution with useLazyQuery](https://www.apollographql.com/docs/react/data/queries#manual-execution-with-uselazyquery) section for a more in-depth overview of `useLazyQuery`.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```jsx
|
|
23
|
+
* import { gql, useLazyQuery } from "@apollo/client";
|
|
24
|
+
*
|
|
25
|
+
* const GET_GREETING = gql`
|
|
26
|
+
* query GetGreeting($language: String!) {
|
|
27
|
+
* greeting(language: $language) {
|
|
28
|
+
* message
|
|
29
|
+
* }
|
|
30
|
+
* }
|
|
31
|
+
* `;
|
|
32
|
+
*
|
|
33
|
+
* function Hello() {
|
|
34
|
+
* const [loadGreeting, { called, loading, data }] = useLazyQuery(
|
|
35
|
+
* GET_GREETING,
|
|
36
|
+
* { variables: { language: "english" } }
|
|
37
|
+
* );
|
|
38
|
+
* if (called && loading) return <p>Loading ...</p>
|
|
39
|
+
* if (!called) {
|
|
40
|
+
* return <button onClick={() => loadGreeting()}>Load greeting</button>
|
|
41
|
+
* }
|
|
42
|
+
* return <h1>Hello {data.greeting.message}!</h1>;
|
|
43
|
+
* }
|
|
44
|
+
* ```
|
|
45
|
+
* @since 3.0.0
|
|
46
|
+
*
|
|
47
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
48
|
+
* @param options - Default options to control how the query is executed.
|
|
49
|
+
* @returns A tuple in the form of `[execute, result]`
|
|
50
|
+
*/
|
|
16
51
|
export function useLazyQuery(query, options) {
|
|
17
52
|
var _a;
|
|
18
53
|
var execOptionsRef = React.useRef();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLazyQuery.js","sourceRoot":"","sources":["../../../src/react/hooks/useLazyQuery.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DocumentNode } from \"graphql\";\nimport type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport * as React from \"rehackt\";\n\nimport type { OperationVariables } from \"../../core/index.js\";\nimport { mergeOptions } from \"../../utilities/index.js\";\nimport type {\n LazyQueryHookExecOptions,\n LazyQueryHookOptions,\n LazyQueryResultTuple,\n NoInfer,\n QueryResult,\n} from \"../types/types.js\";\nimport { useInternalState } from \"./useQuery.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\n\n// The following methods, when called will execute the query, regardless of\n// whether the useLazyQuery execute function was called before.\nconst EAGER_METHODS = [\n \"refetch\",\n \"reobserve\",\n \"fetchMore\",\n \"updateQuery\",\n \"startPolling\",\n \"subscribeToMore\",\n] as const;\n\nexport function useLazyQuery<\n TData = any,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options?: LazyQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>\n): LazyQueryResultTuple<TData, TVariables> {\n const execOptionsRef =\n React.useRef<Partial<LazyQueryHookExecOptions<TData, TVariables>>>();\n const optionsRef = React.useRef<LazyQueryHookOptions<TData, TVariables>>();\n const queryRef = React.useRef<\n DocumentNode | TypedDocumentNode<TData, TVariables>\n >();\n const merged = mergeOptions(options, execOptionsRef.current || {});\n const document = merged?.query ?? query;\n\n // Use refs to track options and the used query to ensure the `execute`\n // function remains referentially stable between renders.\n optionsRef.current = merged;\n queryRef.current = document;\n\n const internalState = useInternalState<TData, TVariables>(\n useApolloClient(options && options.client),\n document\n );\n\n const useQueryResult = internalState.useQuery({\n ...merged,\n skip: !execOptionsRef.current,\n });\n\n const initialFetchPolicy =\n useQueryResult.observable.options.initialFetchPolicy ||\n internalState.getDefaultFetchPolicy();\n\n const result: QueryResult<TData, TVariables> = Object.assign(useQueryResult, {\n called: !!execOptionsRef.current,\n });\n\n // We use useMemo here to make sure the eager methods have a stable identity.\n const eagerMethods = React.useMemo(() => {\n const eagerMethods: Record<string, any> = {};\n for (const key of EAGER_METHODS) {\n const method = result[key];\n eagerMethods[key] = function () {\n if (!execOptionsRef.current) {\n execOptionsRef.current = Object.create(null);\n // Only the first time populating execOptionsRef.current matters here.\n internalState.forceUpdateState();\n }\n // @ts-expect-error this is just too generic to type\n return method.apply(this, arguments);\n };\n }\n\n return eagerMethods;\n }, []);\n\n Object.assign(result, eagerMethods);\n\n const execute = React.useCallback<LazyQueryResultTuple<TData, TVariables>[0]>(\n (executeOptions) => {\n execOptionsRef.current =\n executeOptions ?\n {\n ...executeOptions,\n fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy,\n }\n : {\n fetchPolicy: initialFetchPolicy,\n };\n\n const options = mergeOptions(optionsRef.current, {\n query: queryRef.current,\n ...execOptionsRef.current,\n });\n\n const promise = internalState\n .executeQuery({ ...options, skip: false })\n .then((queryResult) => Object.assign(queryResult, eagerMethods));\n\n // Because the return value of `useLazyQuery` is usually floated, we need\n // to catch the promise to prevent unhandled rejections.\n promise.catch(() => {});\n\n return promise;\n },\n []\n );\n\n return [execute, result];\n}\n"]}
|
|
1
|
+
{"version":3,"file":"useLazyQuery.js","sourceRoot":"","sources":["../../../src/react/hooks/useLazyQuery.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DocumentNode } from \"graphql\";\nimport type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport * as React from \"rehackt\";\n\nimport type { OperationVariables } from \"../../core/index.js\";\nimport { mergeOptions } from \"../../utilities/index.js\";\nimport type {\n LazyQueryHookExecOptions,\n LazyQueryHookOptions,\n LazyQueryResultTuple,\n NoInfer,\n QueryResult,\n} from \"../types/types.js\";\nimport { useInternalState } from \"./useQuery.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\n\n// The following methods, when called will execute the query, regardless of\n// whether the useLazyQuery execute function was called before.\nconst EAGER_METHODS = [\n \"refetch\",\n \"reobserve\",\n \"fetchMore\",\n \"updateQuery\",\n \"startPolling\",\n \"subscribeToMore\",\n] as const;\n\n/**\n * A hook for imperatively executing queries in an Apollo application, e.g. in response to user interaction.\n *\n * > Refer to the [Queries - Manual execution with useLazyQuery](https://www.apollographql.com/docs/react/data/queries#manual-execution-with-uselazyquery) section for a more in-depth overview of `useLazyQuery`.\n *\n * @example\n * ```jsx\n * import { gql, useLazyQuery } from \"@apollo/client\";\n *\n * const GET_GREETING = gql`\n * query GetGreeting($language: String!) {\n * greeting(language: $language) {\n * message\n * }\n * }\n * `;\n *\n * function Hello() {\n * const [loadGreeting, { called, loading, data }] = useLazyQuery(\n * GET_GREETING,\n * { variables: { language: \"english\" } }\n * );\n * if (called && loading) return <p>Loading ...</p>\n * if (!called) {\n * return <button onClick={() => loadGreeting()}>Load greeting</button>\n * }\n * return <h1>Hello {data.greeting.message}!</h1>;\n * }\n * ```\n * @since 3.0.0\n *\n * @param query - A GraphQL query document parsed into an AST by `gql`.\n * @param options - Default options to control how the query is executed.\n * @returns A tuple in the form of `[execute, result]`\n */\nexport function useLazyQuery<\n TData = any,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options?: LazyQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>\n): LazyQueryResultTuple<TData, TVariables> {\n const execOptionsRef =\n React.useRef<Partial<LazyQueryHookExecOptions<TData, TVariables>>>();\n const optionsRef = React.useRef<LazyQueryHookOptions<TData, TVariables>>();\n const queryRef = React.useRef<\n DocumentNode | TypedDocumentNode<TData, TVariables>\n >();\n const merged = mergeOptions(options, execOptionsRef.current || {});\n const document = merged?.query ?? query;\n\n // Use refs to track options and the used query to ensure the `execute`\n // function remains referentially stable between renders.\n optionsRef.current = merged;\n queryRef.current = document;\n\n const internalState = useInternalState<TData, TVariables>(\n useApolloClient(options && options.client),\n document\n );\n\n const useQueryResult = internalState.useQuery({\n ...merged,\n skip: !execOptionsRef.current,\n });\n\n const initialFetchPolicy =\n useQueryResult.observable.options.initialFetchPolicy ||\n internalState.getDefaultFetchPolicy();\n\n const result: QueryResult<TData, TVariables> = Object.assign(useQueryResult, {\n called: !!execOptionsRef.current,\n });\n\n // We use useMemo here to make sure the eager methods have a stable identity.\n const eagerMethods = React.useMemo(() => {\n const eagerMethods: Record<string, any> = {};\n for (const key of EAGER_METHODS) {\n const method = result[key];\n eagerMethods[key] = function () {\n if (!execOptionsRef.current) {\n execOptionsRef.current = Object.create(null);\n // Only the first time populating execOptionsRef.current matters here.\n internalState.forceUpdateState();\n }\n // @ts-expect-error this is just too generic to type\n return method.apply(this, arguments);\n };\n }\n\n return eagerMethods;\n }, []);\n\n Object.assign(result, eagerMethods);\n\n const execute = React.useCallback<LazyQueryResultTuple<TData, TVariables>[0]>(\n (executeOptions) => {\n execOptionsRef.current =\n executeOptions ?\n {\n ...executeOptions,\n fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy,\n }\n : {\n fetchPolicy: initialFetchPolicy,\n };\n\n const options = mergeOptions(optionsRef.current, {\n query: queryRef.current,\n ...execOptionsRef.current,\n });\n\n const promise = internalState\n .executeQuery({ ...options, skip: false })\n .then((queryResult) => Object.assign(queryResult, eagerMethods));\n\n // Because the return value of `useLazyQuery` is usually floated, we need\n // to catch the promise to prevent unhandled rejections.\n promise.catch(() => {});\n\n return promise;\n },\n []\n );\n\n return [execute, result];\n}\n"]}
|
|
@@ -6,11 +6,33 @@ import type { DeepPartial, OnlyRequiredProperties } from "../../utilities/index.
|
|
|
6
6
|
export type LoadQueryFunction<TVariables extends OperationVariables> = (...args: [TVariables] extends [never] ? [] : {} extends OnlyRequiredProperties<TVariables> ? [variables?: TVariables] : [variables: TVariables]) => void;
|
|
7
7
|
type ResetFunction = () => void;
|
|
8
8
|
export type UseLoadableQueryResult<TData = unknown, TVariables extends OperationVariables = OperationVariables> = [
|
|
9
|
-
LoadQueryFunction<TVariables>,
|
|
10
|
-
QueryReference<TData, TVariables> | null,
|
|
9
|
+
loadQuery: LoadQueryFunction<TVariables>,
|
|
10
|
+
queryRef: QueryReference<TData, TVariables> | null,
|
|
11
11
|
{
|
|
12
|
+
/**
|
|
13
|
+
* A function that helps you fetch the next set of results for a [paginated list field](https://www.apollographql.com/docs/react/pagination/core-api/).
|
|
14
|
+
*
|
|
15
|
+
*
|
|
16
|
+
* @docGroup
|
|
17
|
+
*
|
|
18
|
+
* 3. Helper functions
|
|
19
|
+
*/
|
|
12
20
|
fetchMore: FetchMoreFunction<TData, TVariables>;
|
|
21
|
+
/**
|
|
22
|
+
* A function that enables you to re-execute the query, optionally passing in new `variables`.
|
|
23
|
+
*
|
|
24
|
+
* To guarantee that the refetch performs a network request, its `fetchPolicy` is set to `network-only` (unless the original query's `fetchPolicy` is `no-cache` or `cache-and-network`, which also guarantee a network request).
|
|
25
|
+
*
|
|
26
|
+
* See also [Refetching](https://www.apollographql.com/docs/react/data/queries/#refetching).
|
|
27
|
+
*
|
|
28
|
+
* @docGroup
|
|
29
|
+
*
|
|
30
|
+
* 3. Helper functions
|
|
31
|
+
*/
|
|
13
32
|
refetch: RefetchFunction<TData, TVariables>;
|
|
33
|
+
/**
|
|
34
|
+
* A function that resets the `queryRef` back to `null`.
|
|
35
|
+
*/
|
|
14
36
|
reset: ResetFunction;
|
|
15
37
|
}
|
|
16
38
|
];
|
|
@@ -25,6 +47,51 @@ export declare function useLoadableQuery<TData = unknown, TVariables extends Ope
|
|
|
25
47
|
export declare function useLoadableQuery<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: LoadableQueryHookOptions & {
|
|
26
48
|
returnPartialData: true;
|
|
27
49
|
}): UseLoadableQueryResult<DeepPartial<TData>, TVariables>;
|
|
50
|
+
/**
|
|
51
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
52
|
+
* interaction.
|
|
53
|
+
*
|
|
54
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```jsx
|
|
58
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
59
|
+
*
|
|
60
|
+
* const GET_GREETING = gql`
|
|
61
|
+
* query GetGreeting($language: String!) {
|
|
62
|
+
* greeting(language: $language) {
|
|
63
|
+
* message
|
|
64
|
+
* }
|
|
65
|
+
* }
|
|
66
|
+
* `;
|
|
67
|
+
*
|
|
68
|
+
* function App() {
|
|
69
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
70
|
+
*
|
|
71
|
+
* return (
|
|
72
|
+
* <>
|
|
73
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
74
|
+
* Load greeting
|
|
75
|
+
* </button>
|
|
76
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
77
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
78
|
+
* </Suspense>
|
|
79
|
+
* </>
|
|
80
|
+
* );
|
|
81
|
+
* }
|
|
82
|
+
*
|
|
83
|
+
* function Hello({ queryRef }) {
|
|
84
|
+
* const { data } = useReadQuery(queryRef);
|
|
85
|
+
*
|
|
86
|
+
* return <div>{data.greeting.message}</div>;
|
|
87
|
+
* }
|
|
88
|
+
* ```
|
|
89
|
+
*
|
|
90
|
+
* @since 3.9.0
|
|
91
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
92
|
+
* @param options - Options to control how the query is executed.
|
|
93
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
94
|
+
*/
|
|
28
95
|
export declare function useLoadableQuery<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: LoadableQueryHookOptions): UseLoadableQueryResult<TData, TVariables>;
|
|
29
96
|
export {};
|
|
30
97
|
//# sourceMappingURL=useLoadableQuery.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLoadableQuery.js","sourceRoot":"","sources":["../../../src/react/hooks/useLoadableQuery.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"rehackt\";\nimport type {\n DocumentNode,\n FetchMoreQueryOptions,\n OperationVariables,\n TypedDocumentNode,\n WatchQueryOptions,\n} from \"../../core/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\nimport {\n getSuspenseCache,\n unwrapQueryRef,\n updateWrappedQueryRef,\n wrapQueryRef,\n} from \"../internal/index.js\";\nimport type { CacheKey, QueryReference } from \"../internal/index.js\";\nimport type { LoadableQueryHookOptions } from \"../types/types.js\";\nimport { __use, useRenderGuard } from \"./internal/index.js\";\nimport { useWatchQueryOptions } from \"./useSuspenseQuery.js\";\nimport type { FetchMoreFunction, RefetchFunction } from \"./useSuspenseQuery.js\";\nimport { canonicalStringify } from \"../../cache/index.js\";\nimport type {\n DeepPartial,\n OnlyRequiredProperties,\n} from \"../../utilities/index.js\";\nimport { invariant } from \"../../utilities/globals/index.js\";\n\nexport type LoadQueryFunction<TVariables extends OperationVariables> = (\n // Use variadic args to handle cases where TVariables is type `never`, in\n // which case we don't want to allow a variables argument. In other\n // words, we don't want to allow variables to be passed as an argument to this\n // function if the query does not expect variables in the document.\n ...args: [TVariables] extends [never] ? []\n : {} extends OnlyRequiredProperties<TVariables> ? [variables?: TVariables]\n : [variables: TVariables]\n) => void;\n\ntype ResetFunction = () => void;\n\nexport type UseLoadableQueryResult<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n> = [\n LoadQueryFunction<TVariables>,\n QueryReference<TData, TVariables> | null,\n {\n fetchMore: FetchMoreFunction<TData, TVariables>;\n refetch: RefetchFunction<TData, TVariables>;\n reset: ResetFunction;\n },\n];\n\nexport function useLoadableQuery<\n TData,\n TVariables extends OperationVariables,\n TOptions extends LoadableQueryHookOptions,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options?: LoadableQueryHookOptions & TOptions\n): UseLoadableQueryResult<\n TOptions[\"errorPolicy\"] extends \"ignore\" | \"all\" ?\n TOptions[\"returnPartialData\"] extends true ?\n DeepPartial<TData> | undefined\n : TData | undefined\n : TOptions[\"returnPartialData\"] extends true ? DeepPartial<TData>\n : TData,\n TVariables\n>;\n\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options: LoadableQueryHookOptions & {\n returnPartialData: true;\n errorPolicy: \"ignore\" | \"all\";\n }\n): UseLoadableQueryResult<DeepPartial<TData> | undefined, TVariables>;\n\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options: LoadableQueryHookOptions & {\n errorPolicy: \"ignore\" | \"all\";\n }\n): UseLoadableQueryResult<TData | undefined, TVariables>;\n\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options: LoadableQueryHookOptions & {\n returnPartialData: true;\n }\n): UseLoadableQueryResult<DeepPartial<TData>, TVariables>;\n\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options?: LoadableQueryHookOptions\n): UseLoadableQueryResult<TData, TVariables>;\n\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options: LoadableQueryHookOptions = Object.create(null)\n): UseLoadableQueryResult<TData, TVariables> {\n const client = useApolloClient(options.client);\n const suspenseCache = getSuspenseCache(client);\n const watchQueryOptions = useWatchQueryOptions({ client, query, options });\n const { queryKey = [] } = options;\n\n const [queryRef, setQueryRef] = React.useState<QueryReference<\n TData,\n TVariables\n > | null>(null);\n\n const internalQueryRef = queryRef && unwrapQueryRef(queryRef);\n\n if (queryRef && internalQueryRef?.didChangeOptions(watchQueryOptions)) {\n const promise = internalQueryRef.applyOptions(watchQueryOptions);\n updateWrappedQueryRef(queryRef, promise);\n }\n\n const calledDuringRender = useRenderGuard();\n\n const fetchMore: FetchMoreFunction<TData, TVariables> = React.useCallback(\n (options) => {\n if (!internalQueryRef) {\n throw new Error(\n \"The query has not been loaded. Please load the query.\"\n );\n }\n\n const promise = internalQueryRef.fetchMore(\n options as FetchMoreQueryOptions<TVariables, TData>\n );\n\n setQueryRef(wrapQueryRef(internalQueryRef));\n\n return promise;\n },\n [internalQueryRef]\n );\n\n const refetch: RefetchFunction<TData, TVariables> = React.useCallback(\n (options) => {\n if (!internalQueryRef) {\n throw new Error(\n \"The query has not been loaded. Please load the query.\"\n );\n }\n\n const promise = internalQueryRef.refetch(options);\n\n setQueryRef(wrapQueryRef(internalQueryRef));\n\n return promise;\n },\n [internalQueryRef]\n );\n\n const loadQuery: LoadQueryFunction<TVariables> = React.useCallback(\n (...args) => {\n invariant(\n !calledDuringRender(),\n \"useLoadableQuery: 'loadQuery' should not be called during render. To start a query during render, use the 'useBackgroundQuery' hook.\"\n );\n\n const [variables] = args;\n\n const cacheKey: CacheKey = [\n query,\n canonicalStringify(variables),\n ...([] as any[]).concat(queryKey),\n ];\n\n const queryRef = suspenseCache.getQueryRef(cacheKey, () =>\n client.watchQuery({\n ...watchQueryOptions,\n variables,\n } as WatchQueryOptions<any, any>)\n );\n\n setQueryRef(wrapQueryRef(queryRef));\n },\n [query, queryKey, suspenseCache, watchQueryOptions, calledDuringRender]\n );\n\n const reset: ResetFunction = React.useCallback(() => {\n setQueryRef(null);\n }, [queryRef]);\n\n return [loadQuery, queryRef, { fetchMore, refetch, reset }];\n}\n"]}
|
|
1
|
+
{"version":3,"file":"useLoadableQuery.js","sourceRoot":"","sources":["../../../src/react/hooks/useLoadableQuery.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"rehackt\";\nimport type {\n DocumentNode,\n FetchMoreQueryOptions,\n OperationVariables,\n TypedDocumentNode,\n WatchQueryOptions,\n} from \"../../core/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\nimport {\n getSuspenseCache,\n unwrapQueryRef,\n updateWrappedQueryRef,\n wrapQueryRef,\n} from \"../internal/index.js\";\nimport type { CacheKey, QueryReference } from \"../internal/index.js\";\nimport type { LoadableQueryHookOptions } from \"../types/types.js\";\nimport { __use, useRenderGuard } from \"./internal/index.js\";\nimport { useWatchQueryOptions } from \"./useSuspenseQuery.js\";\nimport type { FetchMoreFunction, RefetchFunction } from \"./useSuspenseQuery.js\";\nimport { canonicalStringify } from \"../../cache/index.js\";\nimport type {\n DeepPartial,\n OnlyRequiredProperties,\n} from \"../../utilities/index.js\";\nimport { invariant } from \"../../utilities/globals/index.js\";\n\nexport type LoadQueryFunction<TVariables extends OperationVariables> = (\n // Use variadic args to handle cases where TVariables is type `never`, in\n // which case we don't want to allow a variables argument. In other\n // words, we don't want to allow variables to be passed as an argument to this\n // function if the query does not expect variables in the document.\n ...args: [TVariables] extends [never] ? []\n : {} extends OnlyRequiredProperties<TVariables> ? [variables?: TVariables]\n : [variables: TVariables]\n) => void;\n\ntype ResetFunction = () => void;\n\nexport type UseLoadableQueryResult<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n> = [\n loadQuery: LoadQueryFunction<TVariables>,\n queryRef: QueryReference<TData, TVariables> | null,\n {\n /** {@inheritDoc @apollo/client!QueryResultDocumentation#fetchMore:member} */\n fetchMore: FetchMoreFunction<TData, TVariables>;\n /** {@inheritDoc @apollo/client!QueryResultDocumentation#refetch:member} */\n refetch: RefetchFunction<TData, TVariables>;\n /**\n * A function that resets the `queryRef` back to `null`.\n */\n reset: ResetFunction;\n },\n];\n\nexport function useLoadableQuery<\n TData,\n TVariables extends OperationVariables,\n TOptions extends LoadableQueryHookOptions,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options?: LoadableQueryHookOptions & TOptions\n): UseLoadableQueryResult<\n TOptions[\"errorPolicy\"] extends \"ignore\" | \"all\" ?\n TOptions[\"returnPartialData\"] extends true ?\n DeepPartial<TData> | undefined\n : TData | undefined\n : TOptions[\"returnPartialData\"] extends true ? DeepPartial<TData>\n : TData,\n TVariables\n>;\n\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options: LoadableQueryHookOptions & {\n returnPartialData: true;\n errorPolicy: \"ignore\" | \"all\";\n }\n): UseLoadableQueryResult<DeepPartial<TData> | undefined, TVariables>;\n\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options: LoadableQueryHookOptions & {\n errorPolicy: \"ignore\" | \"all\";\n }\n): UseLoadableQueryResult<TData | undefined, TVariables>;\n\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options: LoadableQueryHookOptions & {\n returnPartialData: true;\n }\n): UseLoadableQueryResult<DeepPartial<TData>, TVariables>;\n\n/**\n * A hook for imperatively loading a query, such as responding to a user\n * interaction.\n *\n * > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.\n *\n * @example\n * ```jsx\n * import { gql, useLoadableQuery } from \"@apollo/client\";\n *\n * const GET_GREETING = gql`\n * query GetGreeting($language: String!) {\n * greeting(language: $language) {\n * message\n * }\n * }\n * `;\n *\n * function App() {\n * const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);\n *\n * return (\n * <>\n * <button onClick={() => loadGreeting({ language: \"english\" })}>\n * Load greeting\n * </button>\n * <Suspense fallback={<div>Loading...</div>}>\n * {queryRef && <Hello queryRef={queryRef} />}\n * </Suspense>\n * </>\n * );\n * }\n *\n * function Hello({ queryRef }) {\n * const { data } = useReadQuery(queryRef);\n *\n * return <div>{data.greeting.message}</div>;\n * }\n * ```\n *\n * @since 3.9.0\n * @param query - A GraphQL query document parsed into an AST by `gql`.\n * @param options - Options to control how the query is executed.\n * @returns A tuple in the form of `[loadQuery, queryRef, handlers]`\n */\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options?: LoadableQueryHookOptions\n): UseLoadableQueryResult<TData, TVariables>;\n\nexport function useLoadableQuery<\n TData = unknown,\n TVariables extends OperationVariables = OperationVariables,\n>(\n query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options: LoadableQueryHookOptions = Object.create(null)\n): UseLoadableQueryResult<TData, TVariables> {\n const client = useApolloClient(options.client);\n const suspenseCache = getSuspenseCache(client);\n const watchQueryOptions = useWatchQueryOptions({ client, query, options });\n const { queryKey = [] } = options;\n\n const [queryRef, setQueryRef] = React.useState<QueryReference<\n TData,\n TVariables\n > | null>(null);\n\n const internalQueryRef = queryRef && unwrapQueryRef(queryRef);\n\n if (queryRef && internalQueryRef?.didChangeOptions(watchQueryOptions)) {\n const promise = internalQueryRef.applyOptions(watchQueryOptions);\n updateWrappedQueryRef(queryRef, promise);\n }\n\n const calledDuringRender = useRenderGuard();\n\n const fetchMore: FetchMoreFunction<TData, TVariables> = React.useCallback(\n (options) => {\n if (!internalQueryRef) {\n throw new Error(\n \"The query has not been loaded. Please load the query.\"\n );\n }\n\n const promise = internalQueryRef.fetchMore(\n options as FetchMoreQueryOptions<TVariables, TData>\n );\n\n setQueryRef(wrapQueryRef(internalQueryRef));\n\n return promise;\n },\n [internalQueryRef]\n );\n\n const refetch: RefetchFunction<TData, TVariables> = React.useCallback(\n (options) => {\n if (!internalQueryRef) {\n throw new Error(\n \"The query has not been loaded. Please load the query.\"\n );\n }\n\n const promise = internalQueryRef.refetch(options);\n\n setQueryRef(wrapQueryRef(internalQueryRef));\n\n return promise;\n },\n [internalQueryRef]\n );\n\n const loadQuery: LoadQueryFunction<TVariables> = React.useCallback(\n (...args) => {\n invariant(\n !calledDuringRender(),\n \"useLoadableQuery: 'loadQuery' should not be called during render. To start a query during render, use the 'useBackgroundQuery' hook.\"\n );\n\n const [variables] = args;\n\n const cacheKey: CacheKey = [\n query,\n canonicalStringify(variables),\n ...([] as any[]).concat(queryKey),\n ];\n\n const queryRef = suspenseCache.getQueryRef(cacheKey, () =>\n client.watchQuery({\n ...watchQueryOptions,\n variables,\n } as WatchQueryOptions<any, any>)\n );\n\n setQueryRef(wrapQueryRef(queryRef));\n },\n [query, queryKey, suspenseCache, watchQueryOptions, calledDuringRender]\n );\n\n const reset: ResetFunction = React.useCallback(() => {\n setQueryRef(null);\n }, [queryRef]);\n\n return [loadQuery, queryRef, { fetchMore, refetch, reset }];\n}\n"]}
|
|
@@ -2,5 +2,52 @@ import type { DocumentNode } from "graphql";
|
|
|
2
2
|
import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
|
|
3
3
|
import type { MutationHookOptions, MutationTuple, NoInfer } from "../types/types.js";
|
|
4
4
|
import type { ApolloCache, DefaultContext, OperationVariables } from "../../core/index.js";
|
|
5
|
+
/**
|
|
6
|
+
*
|
|
7
|
+
*
|
|
8
|
+
* > Refer to the [Mutations](https://www.apollographql.com/docs/react/data/mutations/) section for a more in-depth overview of `useMutation`.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```jsx
|
|
12
|
+
* import { gql, useMutation } from '@apollo/client';
|
|
13
|
+
*
|
|
14
|
+
* const ADD_TODO = gql`
|
|
15
|
+
* mutation AddTodo($type: String!) {
|
|
16
|
+
* addTodo(type: $type) {
|
|
17
|
+
* id
|
|
18
|
+
* type
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* `;
|
|
22
|
+
*
|
|
23
|
+
* function AddTodo() {
|
|
24
|
+
* let input;
|
|
25
|
+
* const [addTodo, { data }] = useMutation(ADD_TODO);
|
|
26
|
+
*
|
|
27
|
+
* return (
|
|
28
|
+
* <div>
|
|
29
|
+
* <form
|
|
30
|
+
* onSubmit={e => {
|
|
31
|
+
* e.preventDefault();
|
|
32
|
+
* addTodo({ variables: { type: input.value } });
|
|
33
|
+
* input.value = '';
|
|
34
|
+
* }}
|
|
35
|
+
* >
|
|
36
|
+
* <input
|
|
37
|
+
* ref={node => {
|
|
38
|
+
* input = node;
|
|
39
|
+
* }}
|
|
40
|
+
* />
|
|
41
|
+
* <button type="submit">Add Todo</button>
|
|
42
|
+
* </form>
|
|
43
|
+
* </div>
|
|
44
|
+
* );
|
|
45
|
+
* }
|
|
46
|
+
* ```
|
|
47
|
+
* @since 3.0.0
|
|
48
|
+
* @param mutation - A GraphQL mutation document parsed into an AST by `gql`.
|
|
49
|
+
* @param options - Options to control how the mutation is executed.
|
|
50
|
+
* @returns A tuple in the form of `[mutate, result]`
|
|
51
|
+
*/
|
|
5
52
|
export declare function useMutation<TData = any, TVariables = OperationVariables, TContext = DefaultContext, TCache extends ApolloCache<any> = ApolloCache<any>>(mutation: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: MutationHookOptions<NoInfer<TData>, NoInfer<TVariables>, TContext, TCache>): MutationTuple<TData, TVariables, TContext, TCache>;
|
|
6
53
|
//# sourceMappingURL=useMutation.d.ts.map
|
|
@@ -5,6 +5,53 @@ import { equal } from "@wry/equality";
|
|
|
5
5
|
import { DocumentType, verifyDocumentType } from "../parser/index.js";
|
|
6
6
|
import { ApolloError } from "../../errors/index.js";
|
|
7
7
|
import { useApolloClient } from "./useApolloClient.js";
|
|
8
|
+
/**
|
|
9
|
+
*
|
|
10
|
+
*
|
|
11
|
+
* > Refer to the [Mutations](https://www.apollographql.com/docs/react/data/mutations/) section for a more in-depth overview of `useMutation`.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```jsx
|
|
15
|
+
* import { gql, useMutation } from '@apollo/client';
|
|
16
|
+
*
|
|
17
|
+
* const ADD_TODO = gql`
|
|
18
|
+
* mutation AddTodo($type: String!) {
|
|
19
|
+
* addTodo(type: $type) {
|
|
20
|
+
* id
|
|
21
|
+
* type
|
|
22
|
+
* }
|
|
23
|
+
* }
|
|
24
|
+
* `;
|
|
25
|
+
*
|
|
26
|
+
* function AddTodo() {
|
|
27
|
+
* let input;
|
|
28
|
+
* const [addTodo, { data }] = useMutation(ADD_TODO);
|
|
29
|
+
*
|
|
30
|
+
* return (
|
|
31
|
+
* <div>
|
|
32
|
+
* <form
|
|
33
|
+
* onSubmit={e => {
|
|
34
|
+
* e.preventDefault();
|
|
35
|
+
* addTodo({ variables: { type: input.value } });
|
|
36
|
+
* input.value = '';
|
|
37
|
+
* }}
|
|
38
|
+
* >
|
|
39
|
+
* <input
|
|
40
|
+
* ref={node => {
|
|
41
|
+
* input = node;
|
|
42
|
+
* }}
|
|
43
|
+
* />
|
|
44
|
+
* <button type="submit">Add Todo</button>
|
|
45
|
+
* </form>
|
|
46
|
+
* </div>
|
|
47
|
+
* );
|
|
48
|
+
* }
|
|
49
|
+
* ```
|
|
50
|
+
* @since 3.0.0
|
|
51
|
+
* @param mutation - A GraphQL mutation document parsed into an AST by `gql`.
|
|
52
|
+
* @param options - Options to control how the mutation is executed.
|
|
53
|
+
* @returns A tuple in the form of `[mutate, result]`
|
|
54
|
+
*/
|
|
8
55
|
export function useMutation(mutation, options) {
|
|
9
56
|
var client = useApolloClient(options === null || options === void 0 ? void 0 : options.client);
|
|
10
57
|
verifyDocumentType(mutation, DocumentType.Mutation);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMutation.js","sourceRoot":"","sources":["../../../src/react/hooks/useMutation.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"rehackt\";\nimport type { DocumentNode } from \"graphql\";\nimport type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport type {\n MutationFunctionOptions,\n MutationHookOptions,\n MutationResult,\n MutationTuple,\n NoInfer,\n} from \"../types/types.js\";\n\nimport type {\n ApolloCache,\n DefaultContext,\n MutationOptions,\n OperationVariables,\n} from \"../../core/index.js\";\nimport { mergeOptions } from \"../../utilities/index.js\";\nimport { equal } from \"@wry/equality\";\nimport { DocumentType, verifyDocumentType } from \"../parser/index.js\";\nimport { ApolloError } from \"../../errors/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\n\nexport function useMutation<\n TData = any,\n TVariables = OperationVariables,\n TContext = DefaultContext,\n TCache extends ApolloCache<any> = ApolloCache<any>,\n>(\n mutation: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options?: MutationHookOptions<\n NoInfer<TData>,\n NoInfer<TVariables>,\n TContext,\n TCache\n >\n): MutationTuple<TData, TVariables, TContext, TCache> {\n const client = useApolloClient(options?.client);\n verifyDocumentType(mutation, DocumentType.Mutation);\n const [result, setResult] = React.useState<Omit<MutationResult, \"reset\">>({\n called: false,\n loading: false,\n client,\n });\n\n const ref = React.useRef({\n result,\n mutationId: 0,\n isMounted: true,\n client,\n mutation,\n options,\n });\n\n // TODO: Trying to assign these in a useEffect or useLayoutEffect breaks\n // higher-order components.\n {\n Object.assign(ref.current, { client, options, mutation });\n }\n\n const execute = React.useCallback(\n (\n executeOptions: MutationFunctionOptions<\n TData,\n TVariables,\n TContext,\n TCache\n > = {}\n ) => {\n const { options, mutation } = ref.current;\n const baseOptions = { ...options, mutation };\n const client = executeOptions.client || ref.current.client;\n\n if (\n !ref.current.result.loading &&\n !baseOptions.ignoreResults &&\n ref.current.isMounted\n ) {\n setResult(\n (ref.current.result = {\n loading: true,\n error: void 0,\n data: void 0,\n called: true,\n client,\n })\n );\n }\n\n const mutationId = ++ref.current.mutationId;\n const clientOptions = mergeOptions(baseOptions, executeOptions);\n\n return client\n .mutate(clientOptions as MutationOptions<TData, OperationVariables>)\n .then((response) => {\n const { data, errors } = response;\n const error =\n errors && errors.length > 0 ?\n new ApolloError({ graphQLErrors: errors })\n : void 0;\n\n const onError =\n executeOptions.onError || ref.current.options?.onError;\n\n if (error && onError) {\n onError(\n error,\n clientOptions as MutationOptions<TData, OperationVariables>\n );\n }\n\n if (\n mutationId === ref.current.mutationId &&\n !clientOptions.ignoreResults\n ) {\n const result = {\n called: true,\n loading: false,\n data,\n error,\n client,\n };\n\n if (ref.current.isMounted && !equal(ref.current.result, result)) {\n setResult((ref.current.result = result));\n }\n }\n\n const onCompleted =\n executeOptions.onCompleted || ref.current.options?.onCompleted;\n\n if (!error) {\n onCompleted?.(\n response.data!,\n clientOptions as MutationOptions<TData, OperationVariables>\n );\n }\n\n return response;\n })\n .catch((error) => {\n if (mutationId === ref.current.mutationId && ref.current.isMounted) {\n const result = {\n loading: false,\n error,\n data: void 0,\n called: true,\n client,\n };\n\n if (!equal(ref.current.result, result)) {\n setResult((ref.current.result = result));\n }\n }\n\n const onError =\n executeOptions.onError || ref.current.options?.onError;\n\n if (onError) {\n onError(\n error,\n clientOptions as MutationOptions<TData, OperationVariables>\n );\n\n // TODO(brian): why are we returning this here???\n return { data: void 0, errors: error };\n }\n\n throw error;\n });\n },\n []\n );\n\n const reset = React.useCallback(() => {\n if (ref.current.isMounted) {\n const result = { called: false, loading: false, client };\n Object.assign(ref.current, { mutationId: 0, result });\n setResult(result);\n }\n }, []);\n\n React.useEffect(() => {\n ref.current.isMounted = true;\n\n return () => {\n ref.current.isMounted = false;\n };\n }, []);\n\n return [execute, { reset, ...result }];\n}\n"]}
|
|
1
|
+
{"version":3,"file":"useMutation.js","sourceRoot":"","sources":["../../../src/react/hooks/useMutation.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"rehackt\";\nimport type { DocumentNode } from \"graphql\";\nimport type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport type {\n MutationFunctionOptions,\n MutationHookOptions,\n MutationResult,\n MutationTuple,\n NoInfer,\n} from \"../types/types.js\";\n\nimport type {\n ApolloCache,\n DefaultContext,\n MutationOptions,\n OperationVariables,\n} from \"../../core/index.js\";\nimport { mergeOptions } from \"../../utilities/index.js\";\nimport { equal } from \"@wry/equality\";\nimport { DocumentType, verifyDocumentType } from \"../parser/index.js\";\nimport { ApolloError } from \"../../errors/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\n\n/**\n *\n *\n * > Refer to the [Mutations](https://www.apollographql.com/docs/react/data/mutations/) section for a more in-depth overview of `useMutation`.\n *\n * @example\n * ```jsx\n * import { gql, useMutation } from '@apollo/client';\n *\n * const ADD_TODO = gql`\n * mutation AddTodo($type: String!) {\n * addTodo(type: $type) {\n * id\n * type\n * }\n * }\n * `;\n *\n * function AddTodo() {\n * let input;\n * const [addTodo, { data }] = useMutation(ADD_TODO);\n *\n * return (\n * <div>\n * <form\n * onSubmit={e => {\n * e.preventDefault();\n * addTodo({ variables: { type: input.value } });\n * input.value = '';\n * }}\n * >\n * <input\n * ref={node => {\n * input = node;\n * }}\n * />\n * <button type=\"submit\">Add Todo</button>\n * </form>\n * </div>\n * );\n * }\n * ```\n * @since 3.0.0\n * @param mutation - A GraphQL mutation document parsed into an AST by `gql`.\n * @param options - Options to control how the mutation is executed.\n * @returns A tuple in the form of `[mutate, result]`\n */\nexport function useMutation<\n TData = any,\n TVariables = OperationVariables,\n TContext = DefaultContext,\n TCache extends ApolloCache<any> = ApolloCache<any>,\n>(\n mutation: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options?: MutationHookOptions<\n NoInfer<TData>,\n NoInfer<TVariables>,\n TContext,\n TCache\n >\n): MutationTuple<TData, TVariables, TContext, TCache> {\n const client = useApolloClient(options?.client);\n verifyDocumentType(mutation, DocumentType.Mutation);\n const [result, setResult] = React.useState<Omit<MutationResult, \"reset\">>({\n called: false,\n loading: false,\n client,\n });\n\n const ref = React.useRef({\n result,\n mutationId: 0,\n isMounted: true,\n client,\n mutation,\n options,\n });\n\n // TODO: Trying to assign these in a useEffect or useLayoutEffect breaks\n // higher-order components.\n {\n Object.assign(ref.current, { client, options, mutation });\n }\n\n const execute = React.useCallback(\n (\n executeOptions: MutationFunctionOptions<\n TData,\n TVariables,\n TContext,\n TCache\n > = {}\n ) => {\n const { options, mutation } = ref.current;\n const baseOptions = { ...options, mutation };\n const client = executeOptions.client || ref.current.client;\n\n if (\n !ref.current.result.loading &&\n !baseOptions.ignoreResults &&\n ref.current.isMounted\n ) {\n setResult(\n (ref.current.result = {\n loading: true,\n error: void 0,\n data: void 0,\n called: true,\n client,\n })\n );\n }\n\n const mutationId = ++ref.current.mutationId;\n const clientOptions = mergeOptions(baseOptions, executeOptions);\n\n return client\n .mutate(clientOptions as MutationOptions<TData, OperationVariables>)\n .then((response) => {\n const { data, errors } = response;\n const error =\n errors && errors.length > 0 ?\n new ApolloError({ graphQLErrors: errors })\n : void 0;\n\n const onError =\n executeOptions.onError || ref.current.options?.onError;\n\n if (error && onError) {\n onError(\n error,\n clientOptions as MutationOptions<TData, OperationVariables>\n );\n }\n\n if (\n mutationId === ref.current.mutationId &&\n !clientOptions.ignoreResults\n ) {\n const result = {\n called: true,\n loading: false,\n data,\n error,\n client,\n };\n\n if (ref.current.isMounted && !equal(ref.current.result, result)) {\n setResult((ref.current.result = result));\n }\n }\n\n const onCompleted =\n executeOptions.onCompleted || ref.current.options?.onCompleted;\n\n if (!error) {\n onCompleted?.(\n response.data!,\n clientOptions as MutationOptions<TData, OperationVariables>\n );\n }\n\n return response;\n })\n .catch((error) => {\n if (mutationId === ref.current.mutationId && ref.current.isMounted) {\n const result = {\n loading: false,\n error,\n data: void 0,\n called: true,\n client,\n };\n\n if (!equal(ref.current.result, result)) {\n setResult((ref.current.result = result));\n }\n }\n\n const onError =\n executeOptions.onError || ref.current.options?.onError;\n\n if (onError) {\n onError(\n error,\n clientOptions as MutationOptions<TData, OperationVariables>\n );\n\n // TODO(brian): why are we returning this here???\n return { data: void 0, errors: error };\n }\n\n throw error;\n });\n },\n []\n );\n\n const reset = React.useCallback(() => {\n if (ref.current.isMounted) {\n const result = { called: false, loading: false, client };\n Object.assign(ref.current, { mutationId: 0, result });\n setResult(result);\n }\n }, []);\n\n React.useEffect(() => {\n ref.current.isMounted = true;\n\n return () => {\n ref.current.isMounted = false;\n };\n }, []);\n\n return [execute, { reset, ...result }];\n}\n"]}
|
|
@@ -2,6 +2,40 @@ import type { OperationVariables, WatchQueryFetchPolicy } from "../../core/index
|
|
|
2
2
|
import type { ApolloClient, ApolloQueryResult, DocumentNode, TypedDocumentNode } from "../../core/index.js";
|
|
3
3
|
import type { QueryHookOptions, QueryResult, NoInfer } from "../types/types.js";
|
|
4
4
|
import { useApolloClient } from "./useApolloClient.js";
|
|
5
|
+
/**
|
|
6
|
+
* A hook for executing queries in an Apollo application.
|
|
7
|
+
*
|
|
8
|
+
* To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
|
|
9
|
+
*
|
|
10
|
+
* When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, and `data` properties you can use to render your UI.
|
|
11
|
+
*
|
|
12
|
+
* > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```jsx
|
|
16
|
+
* import { gql, useQuery } from '@apollo/client';
|
|
17
|
+
*
|
|
18
|
+
* const GET_GREETING = gql`
|
|
19
|
+
* query GetGreeting($language: String!) {
|
|
20
|
+
* greeting(language: $language) {
|
|
21
|
+
* message
|
|
22
|
+
* }
|
|
23
|
+
* }
|
|
24
|
+
* `;
|
|
25
|
+
*
|
|
26
|
+
* function Hello() {
|
|
27
|
+
* const { loading, error, data } = useQuery(GET_GREETING, {
|
|
28
|
+
* variables: { language: 'english' },
|
|
29
|
+
* });
|
|
30
|
+
* if (loading) return <p>Loading ...</p>;
|
|
31
|
+
* return <h1>Hello {data.greeting.message}!</h1>;
|
|
32
|
+
* }
|
|
33
|
+
* ```
|
|
34
|
+
* @since 3.0.0
|
|
35
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
36
|
+
* @param options - Options to control how the query is executed.
|
|
37
|
+
* @returns Query result object
|
|
38
|
+
*/
|
|
5
39
|
export declare function useQuery<TData = any, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: QueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>): QueryResult<TData, TVariables>;
|
|
6
40
|
export declare function useInternalState<TData, TVariables extends OperationVariables>(client: ApolloClient<any>, query: DocumentNode | TypedDocumentNode<TData, TVariables>): InternalState<TData, TVariables>;
|
|
7
41
|
declare class InternalState<TData, TVariables extends OperationVariables> {
|
package/react/hooks/useQuery.js
CHANGED
|
@@ -11,6 +11,40 @@ import { DocumentType, verifyDocumentType } from "../parser/index.js";
|
|
|
11
11
|
import { useApolloClient } from "./useApolloClient.js";
|
|
12
12
|
import { canUseWeakMap, compact, isNonEmptyArray, maybeDeepFreeze, } from "../../utilities/index.js";
|
|
13
13
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
14
|
+
/**
|
|
15
|
+
* A hook for executing queries in an Apollo application.
|
|
16
|
+
*
|
|
17
|
+
* To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
|
|
18
|
+
*
|
|
19
|
+
* When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, and `data` properties you can use to render your UI.
|
|
20
|
+
*
|
|
21
|
+
* > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```jsx
|
|
25
|
+
* import { gql, useQuery } from '@apollo/client';
|
|
26
|
+
*
|
|
27
|
+
* const GET_GREETING = gql`
|
|
28
|
+
* query GetGreeting($language: String!) {
|
|
29
|
+
* greeting(language: $language) {
|
|
30
|
+
* message
|
|
31
|
+
* }
|
|
32
|
+
* }
|
|
33
|
+
* `;
|
|
34
|
+
*
|
|
35
|
+
* function Hello() {
|
|
36
|
+
* const { loading, error, data } = useQuery(GET_GREETING, {
|
|
37
|
+
* variables: { language: 'english' },
|
|
38
|
+
* });
|
|
39
|
+
* if (loading) return <p>Loading ...</p>;
|
|
40
|
+
* return <h1>Hello {data.greeting.message}!</h1>;
|
|
41
|
+
* }
|
|
42
|
+
* ```
|
|
43
|
+
* @since 3.0.0
|
|
44
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
45
|
+
* @param options - Options to control how the query is executed.
|
|
46
|
+
* @returns Query result object
|
|
47
|
+
*/
|
|
14
48
|
export function useQuery(query, options) {
|
|
15
49
|
if (options === void 0) { options = Object.create(null); }
|
|
16
50
|
return useInternalState(useApolloClient(options.client), query).useQuery(options);
|