Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@apollo/client@3.9.0

Minor Changes

• #11424 62f3b6d Thanks @phryneas! - Simplify RetryLink, fix potential memory leak

  Historically, RetryLink would keep a values array of all previous values,
  in case the operation would get an additional subscriber at a later point in time.
  In practice, this could lead to a memory leak (Undocumented value replay feature within RetryableOperation presents memory leak #11393) and did not serve any
  further purpose, as the resulting observable would only be subscribed to by
  Apollo Client itself, and only once - it would be wrapped in a Concast before
  being exposed to the user, and that Concast would handle subscribers on its
  own.

• #11412 58db5c3 Thanks @jerelmiller! - Create a new useQueryRefHandlers hook that returns refetch and fetchMore functions for a given queryRef. This is useful to get access to handlers for a queryRef that was created by createQueryPreloader or when the handlers for a queryRef produced by a different component are inaccessible.

  const MyComponent({ queryRef }) {
    const { refetch, fetchMore } = useQueryRefHandlers(queryRef);
  
    // ...
  }

• #11175 d6d1491 Thanks @phryneas! - To work around issues in React Server Components, especially with bundling for
  the Next.js "edge" runtime we now use an external package to wrap react imports
  instead of importing React directly.

• #11442 4b6f2bc Thanks @jerelmiller! - Remove the need to call retain from useLoadableQuery since useReadQuery will now retain the query. This means that a queryRef that is not consumed by useReadQuery within the given autoDisposeTimeoutMs will now be auto diposed for you.

  Thanks to #11412, disposed query refs will be automatically resubscribed to the query when consumed by useReadQuery after it has been disposed.

• #11410 07fcf6a Thanks @sf-twingate! - Allow returning IGNORE sentinel object from optimisticResponse functions to bail-out from the optimistic update.

  Consider this example:

  const UPDATE_COMMENT = gql`
    mutation UpdateComment($commentId: ID!, $commentContent: String!) {
      updateComment(commentId: $commentId, content: $commentContent) {
        id
        __typename
        content
      }
    }
  `;
  
  function CommentPageWithData() {
    const [mutate] = useMutation(UPDATE_COMMENT);
    return (
      <Comment
        updateComment={({ commentId, commentContent }) =>
          mutate({
            variables: { commentId, commentContent },
            optimisticResponse: (vars, { IGNORE }) => {
              if (commentContent === "foo") {
                // conditionally bail out of optimistic updates
                return IGNORE;
              }
              return {
                updateComment: {
                  id: commentId,
                  __typename: "Comment",
                  content: commentContent,
                },
              };
            },
          })
        }
      />
    );
  }

  The IGNORE sentinel can be destructured from the second parameter in the callback function signature passed to optimisticResponse.

• #11495 1190aa5 Thanks @jerelmiller! - Increase the default memory limits for executeSelectionSet and executeSelectionSetArray.

• #11412 58db5c3 Thanks @jerelmiller! - Add the ability to start preloading a query outside React to begin fetching as early as possible. Call createQueryPreloader to create a preloadQuery function which can be called to start fetching a query. This returns a queryRef which is passed to useReadQuery and suspended until the query is done fetching.

  const preloadQuery = createQueryPreloader(client);
  const queryRef = preloadQuery(QUERY, { variables, ...otherOptions });
  
  function App() {
    return {
      <Suspense fallback={<div>Loading</div>}>
        <MyQuery />
      </Suspense>
    }
  }
  
  function MyQuery() {
    const { data } = useReadQuery(queryRef);
  
    // do something with data
  }

• #11202 7c2bc08 Thanks @benjamn! - Prevent QueryInfo#markResult mutation of result.data and return cache data consistently whether complete or incomplete.

• #11345 1759066 Thanks @phryneas! - QueryManager.inFlightLinkObservables now uses a strong Trie as an internal data structure.

  Warning: requires @apollo/experimental-nextjs-app-support update

  If you are using @apollo/experimental-nextjs-app-support, you will need to update that to at least 0.5.2, as it accesses this internal data structure.

• #6701 8d2b4e1 Thanks @prowe! - Ability to dynamically match mocks

  Adds support for a new property MockedResponse.variableMatcher: a predicate function that accepts a variables param. If true, the variables will be passed into the ResultFunction to help dynamically build a response.

• #11301 46ab032 Thanks @alessbell! - Add multipart subscription network adapters for Relay and urql

  Relay

  import { createFetchMultipartSubscription } from "@apollo/client/utilities/subscriptions/relay";
  import { Environment, Network, RecordSource, Store } from "relay-runtime";
  
  const fetchMultipartSubs = createFetchMultipartSubscription(
    "http://localhost:4000",
  );
  
  const network = Network.create(fetchQuery, fetchMultipartSubs);
  
  export const RelayEnvironment = new Environment({
    network,
    store: new Store(new RecordSource()),
  });

  Urql

  import { createFetchMultipartSubscription } from "@apollo/client/utilities/subscriptions/urql";
  import { Client, fetchExchange, subscriptionExchange } from "@urql/core";
  
  const url = "http://localhost:4000";
  
  const multipartSubscriptionForwarder = createFetchMultipartSubscription(url);
  
  const client = new Client({
    url,
    exchanges: [
      fetchExchange,
      subscriptionExchange({
        forwardSubscription: multipartSubscriptionForwarder,
      }),
    ],
  });

• #11397 3f7eecb Thanks @aditya-kumawat! - Adds a new skipPollAttempt callback function that's called whenever a refetch attempt occurs while polling. If the function returns true, the refetch is skipped and not reattempted until the next poll interval. This will solve the frequent use-case of disabling polling when the window is inactive.

  useQuery(QUERY, {
    pollInterval: 1000,
    skipPollAttempt: () => document.hidden, // or !document.hasFocus()
  });
  // or define it globally
  new ApolloClient({
    defaultOptions: {
      watchQuery: {
        skipPollAttempt: () => document.hidden, // or !document.hasFocus()
      },
    },
  });

• #11300 a815873 Thanks @jerelmiller! - Introduces a new useLoadableQuery hook. This hook works similarly to useBackgroundQuery in that it returns a queryRef that can be used to suspend a component via the useReadQuery hook. It provides a more ergonomic way to load the query during a user interaction (for example when wanting to preload some data) that would otherwise be clunky with useBackgroundQuery.

  function App() {
    const [loadQuery, queryRef, { refetch, fetchMore, reset }] =
      useLoadableQuery(query, options);
  
    return (
      <>
        <button onClick={() => loadQuery(variables)}>Load query</button>
        <Suspense fallback={<SuspenseFallback />}>
          {queryRef && <Child queryRef={queryRef} />}
        </Suspense>
      </>
    );
  }
  
  function Child({ queryRef }) {
    const { data } = useReadQuery(queryRef);
  
    // ...
  }

• #11435 5cce53e Thanks @phryneas! - Deprecates canonizeResults.

  Using canonizeResults can result in memory leaks so we generally do not recommend using this option anymore.
  A future version of Apollo Client will contain a similar feature without the risk of memory leaks.

• #11438 6d46ab9 Thanks @jerelmiller! - Remove the need to call retain from useBackgroundQuery since useReadQuery will now retain the query. This means that a queryRef that is not consumed by useReadQuery within the given autoDisposeTimeoutMs will now be auto diposed for you.

  Thanks to #11412, disposed query refs will be automatically resubscribed to the query when consumed by useReadQuery after it has been disposed.

• #11178 4d64a6f Thanks @sebakerckhof! - Support re-using of mocks in the MockedProvider

Patch Changes

• #11254 d08970d Thanks @benjamn! - Decouple canonicalStringify from ObjectCanon for better time and memory performance.

• #11275 3862f9b Thanks @phryneas! - Add a defaultContext option and property on ApolloClient, e.g. for keeping track of changing auth tokens or dependency injection.

  This can be used e.g. in authentication scenarios, where a new token might be
  generated outside of the link chain and should passed into the link chain.

  import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
  import { setContext } from "@apollo/client/link/context";
  
  const httpLink = createHttpLink({
    uri: "/graphql",
  });
  
  const authLink = setContext((_, { headers, token }) => {
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
      },
    };
  });
  
  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });
  
  // somewhere else in your application
  function onNewToken(newToken) {
    // token can now be changed for future requests without need for a global
    // variable, scoped ref or recreating the client
    client.defaultContext.token = newToken;
  }

• #11443 ff5a332 Thanks @phryneas! - Adds a deprecation warning to the HOC and render prop APIs.

  The HOC and render prop APIs have already been deprecated since 2020,
  but we previously didn't have a @deprecated tag in the DocBlocks.

• #11356 cc4ac7e Thanks @phryneas! - Fix a potential memory leak in FragmentRegistry.transform and FragmentRegistry.findFragmentSpreads that would hold on to passed-in DocumentNodes for too long.

• #11370 25e2cb4 Thanks @phryneas! - parse function: improve memory management

  • use LRU WeakCache instead of Map to keep a limited number of parsed results
  • cache is initiated lazily, only when needed
  • expose parse.resetCache() method

• #11389 139acd1 Thanks @phryneas! - documentTransform: use optimism and WeakCache instead of directly storing data on the Trie

• #11358 7d939f8 Thanks @phryneas! - Fixes a potential memory leak in Concast that might have been triggered when Concast was used outside of Apollo Client.

• #11344 bd26676 Thanks @phryneas! - Add a resetCache method to DocumentTransform and hook InMemoryCache.addTypenameTransform up to InMemoryCache.gc

• #11367 30d17bf Thanks @phryneas! - print: use WeakCache instead of WeakMap

• #11385 d9ca4f0 Thanks @phryneas! - ensure defaultContext is also used for mutations and subscriptions

• #11387 4dce867 Thanks @phryneas! - QueryManager.transformCache: use WeakCache instead of WeakMap

• #11503 67f62e3 Thanks @jerelmiller! - Release changes from v3.8.10

• #11078 14edebe Thanks @phryneas! - ObservableQuery: prevent reporting results of previous queries if the variables changed since

• #11439 33454f0 Thanks @jerelmiller! - Address bundling issue introduced in #11412 where the react/cache internals ended up duplicated in the bundle. This was due to the fact that we had a react/hooks entrypoint that imported these files along with the newly introduced createQueryPreloader function, which lived outside of the react/hooks folder.

• #11371 ebd8fe2 Thanks @phryneas! - Clarify types of EntityStore.makeCacheKey.

• #11369 2a47164 Thanks @phryneas! - Persisted Query Link: improve memory management

  • use LRU WeakCache instead of WeakMap to keep a limited number of hash results
  • hash cache is initiated lazily, only when needed
  • expose persistedLink.resetHashCache() method
  • reset hash cache if the upstream server reports it doesn't accept persisted queries

• #10804 221dd99 Thanks @phryneas! - use WeakMap in React Native with Hermes

• #11355 7d8e184 Thanks @phryneas! - InMemoryCache.gc now also triggers FragmentRegistry.resetCaches (if there is a FragmentRegistry)

• #11409 2e7203b Thanks @phryneas! - Adds an experimental ApolloClient.getMemoryInternals helper

• #11343 776631d Thanks @phryneas! - Add reset method to print, hook up to InMemoryCache.gc

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	45c8f81
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/65b952d3cbcd3700087eefcd
😎 Deploy Preview	https://deploy-preview-11540--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	38.23 KB (-0.01% 🔽)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	46.03 KB (-0.01% 🔽)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	43.58 KB (-0.01% 🔽)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	33.96 KB (-0.01% 🔽)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	31.88 KB (-0.01% 🔽)
import { ApolloProvider } from "dist/react/index.js"	1.23 KB (-0.08% 🔽)
import { ApolloProvider } from "dist/react/index.js" (production)	1.21 KB (-0.09% 🔽)
import { useQuery } from "dist/react/index.js"	5.2 KB (-0.02% 🔽)
import { useQuery } from "dist/react/index.js" (production)	4.27 KB (-0.05% 🔽)
import { useLazyQuery } from "dist/react/index.js"	5.5 KB (-0.02% 🔽)
import { useLazyQuery } from "dist/react/index.js" (production)	4.58 KB (-0.03% 🔽)
import { useMutation } from "dist/react/index.js"	3.51 KB (-0.06% 🔽)
import { useMutation } from "dist/react/index.js" (production)	2.73 KB (-0.04% 🔽)
import { useSubscription } from "dist/react/index.js"	3.19 KB (-0.04% 🔽)
import { useSubscription } from "dist/react/index.js" (production)	2.38 KB (-0.09% 🔽)
import { useSuspenseQuery } from "dist/react/index.js"	5.28 KB (-0.02% 🔽)
import { useSuspenseQuery } from "dist/react/index.js" (production)	3.94 KB (-0.03% 🔽)
import { useBackgroundQuery } from "dist/react/index.js"	4.75 KB (-0.03% 🔽)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.4 KB (-0.06% 🔽)
import { useLoadableQuery } from "dist/react/index.js"	4.97 KB (-0.02% 🔽)
import { useLoadableQuery } from "dist/react/index.js" (production)	3.63 KB (-0.03% 🔽)
import { useReadQuery } from "dist/react/index.js"	3.04 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production)	2.98 KB (-0.04% 🔽)
import { useFragment } from "dist/react/index.js"	2.18 KB (-0.05% 🔽)
import { useFragment } from "dist/react/index.js" (production)	2.13 KB (-0.1% 🔽)