@apollo/client - npm Package Compare versions

Comparing version 0.0.0-pr-11617-20240226143959 to 0.0.0-pr-11617-20240227102358

dev/dev.cjs.native.js

@@ -431,3 +431,3 @@ 'use strict';
 
-var version = "0.0.0-pr-11617-20240226143959";
+var version = "0.0.0-pr-11617-20240227102358";
 
@@ -434,0 +434,0 @@ function maybe(thunk) {

package.json

 {
   "name": "@apollo/client",
-  "version": "0.0.0-pr-11617-20240226143959",
+  "version": "0.0.0-pr-11617-20240227102358",
   "description": "A fully-featured caching GraphQL client.",
@@ -5,0 +5,0 @@ "private": false,

react/hooks/hooks.cjs.native.js

@@ -133,20 +133,15 @@ 'use strict';
 /*#__NO_SIDE_EFFECTS__*/
-function makeHookWrappable(hookName, getClientFromOptions, useHook) {
-    return function () {
-        var args = arguments;
-        var queryManager = getClientFromOptions.apply(this, args)["queryManager"];
-        var wrappers = queryManager && queryManager[wrapperSymbol];
-        var wrapper = wrappers && wrappers[hookName];
-        var wrappedHook = wrapper ? wrapper(useHook) : useHook;
-        return wrappedHook.apply(this, args);
-    };
+function wrapHook(hookName, useHook, clientOrObsQuery) {
+    var queryManager = clientOrObsQuery["queryManager"];
+    var wrappers = queryManager && queryManager[wrapperSymbol];
+    var wrapper = wrappers && wrappers[hookName];
+    return wrapper ? wrapper(useHook) : useHook;
 }
 
 var hasOwnProperty = Object.prototype.hasOwnProperty;
-function useQuery() {
-    useQuery = makeHookWrappable("useQuery", function (_, options) { return useApolloClient(options && options.client); }, _useQuery);
-    return useQuery.apply(null, arguments);
+function useQuery(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    return wrapHook("useQuery", _useQuery, useApolloClient(options && options.client))(query, options);
 }
 function _useQuery(query, options) {
-    if (options === void 0) { options = Object.create(null); }
     return useInternalState(useApolloClient(options.client), query).useQuery(options);
@@ -756,5 +751,4 @@ }
 
-function useFragment() {
-    useFragment = makeHookWrappable("useFragment", function (options) { return useApolloClient(options.client); }, _useFragment);
-    return useFragment.apply(null, arguments);
+function useFragment(options) {
+    return wrapHook("useFragment", _useFragment, useApolloClient(options.client))(options);
 }
@@ -799,10 +793,7 @@ function _useFragment(options) {
 
-function useSuspenseQuery() {
-    useSuspenseQuery = makeHookWrappable("useSuspenseQuery", function (_, options) {
-        return useApolloClient(typeof options === "object" ? options.client : undefined);
-    }, _useSuspenseQuery);
-    return useSuspenseQuery.apply(null, arguments);
+function useSuspenseQuery(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    return wrapHook("useSuspenseQuery", _useSuspenseQuery, useApolloClient(typeof options === "object" ? options.client : undefined))(query, options);
 }
 function _useSuspenseQuery(query, options) {
-    if (options === void 0) { options = Object.create(null); }
     var client = useApolloClient(options.client);
@@ -923,10 +914,7 @@ var suspenseCache = internal.getSuspenseCache(client);
 
-function useBackgroundQuery() {
-    useBackgroundQuery = makeHookWrappable("useBackgroundQuery", function (_, options) {
-        return useApolloClient(typeof options === "object" ? options.client : undefined);
-    }, _useBackgroundQuery);
-    return useBackgroundQuery.apply(null, arguments);
+function useBackgroundQuery(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    return wrapHook("useBackgroundQuery", _useBackgroundQuery, useApolloClient(typeof options === "object" ? options.client : undefined))(query, options);
 }
 function _useBackgroundQuery(query, options) {
-    if (options === void 0) { options = Object.create(null); }
     var client = useApolloClient(options.client);
@@ -1045,5 +1033,4 @@ var suspenseCache = internal.getSuspenseCache(client);
 
-function useReadQuery() {
-    useReadQuery = makeHookWrappable("useReadQuery", function (ref) { return internal.unwrapQueryRef(ref)["observable"]; }, _useReadQuery);
-    return useReadQuery.apply(null, arguments);
+function useReadQuery(queryRef) {
+    return wrapHook("useReadQuery", _useReadQuery, internal.unwrapQueryRef(queryRef)["observable"])(queryRef);
 }
@@ -1050,0 +1037,0 @@ function _useReadQuery(queryRef) {

react/hooks/internal/index.d.ts

@@ -6,3 +6,3 @@ export { useDeepMemo } from "./useDeepMemo.js";
 export { __use } from "./__use.js";
-export { makeHookWrappable } from "./wrapHook.js";
+export { wrapHook } from "./wrapHook.js";
 //# sourceMappingURL=index.d.ts.map

react/hooks/internal/index.js

@@ -7,3 +7,3 @@ // These hooks are used internally and are not exported publicly by the library
 export { __use } from "./__use.js";
-export { makeHookWrappable } from "./wrapHook.js";
+export { wrapHook } from "./wrapHook.js";
 //# sourceMappingURL=index.js.map

react/hooks/internal/wrapHook.d.ts

@@ -30,8 +30,19 @@ import type { useQuery, useSuspenseQuery, useBackgroundQuery, useReadQuery, useFragment } from "../index.js";
  *
+ * // although for tree-shaking purposes, in reality it looks more like
+ * function useQuery() {
+ *   return wrapHook('useQuery', _useQuery, options.client)(query, options);
+ * }
+ * function _useQuery(query, options) {
+ *   // original implementation
+ * }
+ *
  * // this is what a library like `@apollo/client-react-streaming` would do
  * class ApolloClientWithStreaming extends ApolloClient {
- *   [Symbol.for("apollo.hook.wrappers")] = {
- *     useQuery: (original) => (query, options) => {
- *       console.log("useQuery was called with options", options);
- *       return original(query, options);
+ *   constructor(options) {
+ *     super(options);
+ *     this.queryManager[Symbol.for("apollo.hook.wrappers")] = {
+ *       useQuery: (original) => (query, options) => {
+ *         console.log("useQuery was called with options", options);
+ *         return original(query, options);
+ *       }
  *     }
@@ -46,4 +57,4 @@ *   }
  */
-export declare function makeHookWrappable<Name extends keyof WrappableHooks>(hookName: Name, getClientFromOptions: (...args: Parameters<WrappableHooks[Name]>) => ObservableQuery<any> | ApolloClient<any>, useHook: WrappableHooks[Name]): WrappableHooks[Name];
+export declare function wrapHook<Hook extends (...args: any[]) => any>(hookName: keyof WrappableHooks, useHook: Hook, clientOrObsQuery: ObservableQuery<any> | ApolloClient<any>): Hook;
 export {};
 //# sourceMappingURL=wrapHook.d.ts.map

react/hooks/internal/wrapHook.js

@@ -13,8 +13,19 @@ var wrapperSymbol = Symbol.for("apollo.hook.wrappers");
  *
+ * // although for tree-shaking purposes, in reality it looks more like
+ * function useQuery() {
+ *   return wrapHook('useQuery', _useQuery, options.client)(query, options);
+ * }
+ * function _useQuery(query, options) {
+ *   // original implementation
+ * }
+ *
  * // this is what a library like `@apollo/client-react-streaming` would do
  * class ApolloClientWithStreaming extends ApolloClient {
- *   [Symbol.for("apollo.hook.wrappers")] = {
- *     useQuery: (original) => (query, options) => {
- *       console.log("useQuery was called with options", options);
- *       return original(query, options);
+ *   constructor(options) {
+ *     super(options);
+ *     this.queryManager[Symbol.for("apollo.hook.wrappers")] = {
+ *       useQuery: (original) => (query, options) => {
+ *         console.log("useQuery was called with options", options);
+ *         return original(query, options);
+ *       }
  *     }
@@ -30,12 +41,8 @@ *   }
 /*#__NO_SIDE_EFFECTS__*/
-export function makeHookWrappable(hookName, getClientFromOptions, useHook) {
-    return function () {
-        var args = arguments;
-        var queryManager = getClientFromOptions.apply(this, args)["queryManager"];
-        var wrappers = queryManager && queryManager[wrapperSymbol];
-        var wrapper = wrappers && wrappers[hookName];
-        var wrappedHook = wrapper ? wrapper(useHook) : useHook;
-        return wrappedHook.apply(this, args);
-    };
+export function wrapHook(hookName, useHook, clientOrObsQuery) {
+    var queryManager = clientOrObsQuery["queryManager"];
+    var wrappers = queryManager && queryManager[wrapperSymbol];
+    var wrapper = wrappers && wrappers[hookName];
+    return wrapper ? wrapper(useHook) : useHook;
 }
 //# sourceMappingURL=wrapHook.js.map

react/hooks/useBackgroundQuery.js

@@ -5,14 +5,10 @@ import { __spreadArray } from "tslib";
 import { getSuspenseCache, unwrapQueryRef, updateWrappedQueryRef, wrapQueryRef, } from "../internal/index.js";
-import { makeHookWrappable } from "./internal/index.js";
+import { wrapHook } from "./internal/index.js";
 import { useWatchQueryOptions } from "./useSuspenseQuery.js";
 import { canonicalStringify } from "../../cache/index.js";
-export function useBackgroundQuery() {
-    // @ts-expect-error Cannot assign to 'useBackgroundQuery' because it is a function.ts(2630)
-    useBackgroundQuery = makeHookWrappable("useBackgroundQuery", function (_, options) {
-        return useApolloClient(typeof options === "object" ? options.client : undefined);
-    }, _useBackgroundQuery);
-    return useBackgroundQuery.apply(null, arguments);
+export function useBackgroundQuery(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    return wrapHook("useBackgroundQuery", _useBackgroundQuery, useApolloClient(typeof options === "object" ? options.client : undefined))(query, options);
 }
 function _useBackgroundQuery(query, options) {
-    if (options === void 0) { options = Object.create(null); }
     var client = useApolloClient(options.client);
@@ -19,0 +15,0 @@ var suspenseCache = getSuspenseCache(client);

react/hooks/useFragment.js

@@ -7,7 +7,5 @@ import { __assign, __rest } from "tslib";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
-import { useDeepMemo, useLazyRef, makeHookWrappable, } from "./internal/index.js";
-export function useFragment() {
-    // @ts-expect-error Cannot assign to 'useFragment' because it is a function.ts(2630)
-    useFragment = makeHookWrappable("useFragment", function (options) { return useApolloClient(options.client); }, _useFragment);
-    return useFragment.apply(null, arguments);
+import { useDeepMemo, useLazyRef, wrapHook } from "./internal/index.js";
+export function useFragment(options) {
+    return wrapHook("useFragment", _useFragment, useApolloClient(options.client))(options);
 }
@@ -14,0 +12,0 @@ function _useFragment(options) {

react/hooks/useQuery.js

@@ -13,11 +13,43 @@ import { __assign, __rest } from "tslib";
 import { canUseWeakMap, compact, isNonEmptyArray, maybeDeepFreeze, } from "../../utilities/index.js";
-import { makeHookWrappable } from "./internal/index.js";
+import { wrapHook } from "./internal/index.js";
 var hasOwnProperty = Object.prototype.hasOwnProperty;
-export function useQuery() {
-    // @ts-expect-error Cannot assign to 'useQuery' because it is a function. ts(2630)
-    useQuery = makeHookWrappable("useQuery", function (_, options) { return useApolloClient(options && options.client); }, _useQuery);
-    return useQuery.apply(null, arguments);
+/**
+ * A hook for executing queries in an Apollo application.
+ *
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
+ *
+ * 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.
+ *
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
+ *
+ * @example
+ * ```jsx
+ * import { gql, useQuery } from '@apollo/client';
+ *
+ * const GET_GREETING = gql`
+ *   query GetGreeting($language: String!) {
+ *     greeting(language: $language) {
+ *       message
+ *     }
+ *   }
+ * `;
+ *
+ * function Hello() {
+ *   const { loading, error, data } = useQuery(GET_GREETING, {
+ *     variables: { language: 'english' },
+ *   });
+ *   if (loading) return <p>Loading ...</p>;
+ *   return <h1>Hello {data.greeting.message}!</h1>;
+ * }
+ * ```
+ * @since 3.0.0
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
+ * @param options - Options to control how the query is executed.
+ * @returns Query result object
+ */
+export function useQuery(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    return wrapHook("useQuery", _useQuery, useApolloClient(options && options.client))(query, options);
 }
 function _useQuery(query, options) {
-    if (options === void 0) { options = Object.create(null); }
     return useInternalState(useApolloClient(options.client), query).useQuery(options);
@@ -24,0 +56,0 @@ }

react/hooks/useReadQuery.js

 import * as React from "rehackt";
 import { getWrappedPromise, unwrapQueryRef, updateWrappedQueryRef, } from "../internal/index.js";
-import { __use, makeHookWrappable } from "./internal/index.js";
+import { __use, wrapHook } from "./internal/index.js";
 import { toApolloError } from "./useSuspenseQuery.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
-export function useReadQuery() {
-    // @ts-expect-error Cannot assign to 'useReadQuery' because it is a function.ts(2630)
-    useReadQuery = makeHookWrappable("useReadQuery", function (ref) { return unwrapQueryRef(ref)["observable"]; }, _useReadQuery);
-    return useReadQuery.apply(null, arguments);
+export function useReadQuery(queryRef) {
+    return wrapHook("useReadQuery", _useReadQuery, unwrapQueryRef(queryRef)["observable"])(queryRef);
 }
@@ -11,0 +9,0 @@ function _useReadQuery(queryRef) {

react/hooks/useSuspenseQuery.js

@@ -8,15 +8,11 @@ import { __assign, __spreadArray } from "tslib";
 import { DocumentType, verifyDocumentType } from "../parser/index.js";
-import { __use, useDeepMemo, makeHookWrappable } from "./internal/index.js";
+import { __use, useDeepMemo, wrapHook } from "./internal/index.js";
 import { getSuspenseCache } from "../internal/index.js";
 import { canonicalStringify } from "../../cache/index.js";
 import { skipToken } from "./constants.js";
-export function useSuspenseQuery() {
-    // @ts-expect-error Cannot assign to 'useSuspenseQuery' because it is a function. ts(2630)
-    useSuspenseQuery = makeHookWrappable("useSuspenseQuery", function (_, options) {
-        return useApolloClient(typeof options === "object" ? options.client : undefined);
-    }, _useSuspenseQuery);
-    return useSuspenseQuery.apply(null, arguments);
+export function useSuspenseQuery(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    return wrapHook("useSuspenseQuery", _useSuspenseQuery, useApolloClient(typeof options === "object" ? options.client : undefined))(query, options);
 }
 function _useSuspenseQuery(query, options) {
-    if (options === void 0) { options = Object.create(null); }
     var client = useApolloClient(options.client);
@@ -23,0 +19,0 @@ var suspenseCache = getSuspenseCache(client);

utilities/globals/globals.cjs.native.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var version = "0.0.0-pr-11617-20240226143959";
+var version = "0.0.0-pr-11617-20240227102358";
 
@@ -10,0 +10,0 @@ function maybe(thunk) {

version.js

@@ -1,2 +0,2 @@
-export var version = "0.0.0-pr-11617-20240226143959";
+export var version = "0.0.0-pr-11617-20240227102358";
 //# sourceMappingURL=version.js.map

No alert changes

Worsened metrics

Total package byte prevSize

6657839

decreased by-0.03%

Lines of code

57917

No dependency changes