v3.8.5

Patch Changes

• #11266 5192cf6e1 Thanks @phryneas! - Fixes argument handling for invariant log messages.

• #11235 6cddaaf65 Thanks @phryneas! - Fix nextFetchPolicy behaviour with transformed documents by keeping options reference stable when passing it through QueryManager.

• #11252 327a2abbd Thanks @phryneas! - Fixes a race condition in asyncMap that caused issues in React Native when errors were returned in the response payload along with a data property that was null.

• #11229 c372bad4e Thanks @phryneas! - Remove (already throwing) SuspenseCache export that should have been removed in 3.8.

• #11267 bc055e068 Thanks @phryneas! - Remove some dead code.

v3.9.0-alpha.1

Minor Changes

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

v3.9.0-alpha.0

Minor Changes

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

• #6701 8d2b4e107 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.

v3.8.4

Patch Changes

• #11195 9e59b251d Thanks @phryneas! - For invariant.log etc., error arguments are now serialized correctly in the link to the error page.

v3.8.3

Patch Changes

• #11193 fd2a4cf0c Thanks @phryneas! - Call devtools registration after ApolloClient is fully set up.

v3.8.2

Patch Changes

• #10072 51045c336 Thanks @Huulivoide! - Fixes race conditions in useReactiveVar that may prevent updates to the reactive variable from propagating through the hook.

• #11162 d9685f53c Thanks @jerelmiller! - Ensures GraphQL errors returned in subscription payloads adhere to the errorPolicy set in client.subscribe(...) calls.

• #11134 96492e142 Thanks @alessbell! - Use separate type imports in useSuspenseQuery and useBackgroundQuery to workaround SWC compiler issue.

• #11117 6b8198109 Thanks @phryneas! - Adds a new devtools registration mechanism and tweaks the mechanism behind the
  "devtools not found" mechanic.

• #11186 f1d429f32 Thanks @jerelmiller! - Fix an issue where race conditions when rapidly switching between variables would sometimes result in the wrong data returned from the query. Specifically this occurs when a query is triggered with an initial set of variables (VariablesA), then triggers the same query with another set of variables (VariablesB) but switches back to the VariablesA before the response for VariablesB is returned. Previously this would result in the data for VariablesB to be displayed while VariablesA was active. The data is for VariablesA is now properly returned.

• #11163 a8a9e11e9 Thanks @bignimbus! - Fix typo in error message: "occured" -> "occurred"

• #11180 7d9c481e5 Thanks @jerelmiller! - Fixes an issue where refetching from useBackgroundQuery via refetch with an error after an error was already fetched would get stuck in a loading state.

v3.8.1

Patch Changes

• #11141 c469b1616 Thanks @jerelmiller! - Remove newly exported response iterator helpers that caused problems on some installs where @types/node was not available.

  IMPORTANT

  The following exports were added in version 3.8.0 that are removed with this patch.

  • isAsyncIterableIterator
  • isBlob
  • isNodeReadableStream
  • isNodeResponse
  • isReadableStream
  • isStreamableBlob

v3.8.0

Minor Changes

Fetching with Suspense 🎉

• #10323 64cb88a4b Thanks @jerelmiller! - Add support for React suspense with a new useSuspenseQuery hook.

  useSuspenseQuery initiates a network request and causes the component calling it to suspend while the request is in flight. It can be thought of as a drop-in replacement for useQuery that allows you to take advantage of React's concurrent features while fetching during render.

  Consider a Dog component that fetches and renders some information about a dog named Mozzarella:

  View code 🐶

  import { Suspense } from 'react';
  import { gql, TypedDocumentNode, useSuspenseQuery } from '@apollo/client';
  
  interface Data {
    dog: {
      id: string;
      name: string;
    };
  }
  
  interface Variables {
    name: string;
  }
  
  const GET_DOG_QUERY: TypedDocumentNode<Data, Variables> = gql`
    query GetDog($name: String) {
      dog(name: $name) {
        id
        name
      }
    }
  `;
  
  function App() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <Dog name="Mozzarella" />
      </Suspense>
    );
  }
  
  function Dog({ name }: { name: string }) {
    const { data } = useSuspenseQuery(GET_DOG_QUERY, {
      variables: { name },
    });
  
    return <>Name: {data.dog.name}</>;
  }

  For a detailed explanation of useSuspenseQuery, see our fetching with Suspense reference.

• #10755 e3c676deb Thanks @alessbell! - Feature: adds useBackgroundQuery and useReadQuery hooks

  useBackgroundQuery initiates a request for data in a parent component and returns a QueryReference which is used to read the data in a child component via useReadQuery. If the child component attempts to render before the data can be found in the cache, the child component will suspend until the data is available. On cache updates to watched data, the child component calling useReadQuery will re-render with new data but the parent component will not re-render (as it would, for example, if it were using useQuery to issue the request).

  Consider an App component that fetches a list of breeds in the background while also fetching and rendering some information about an individual dog, Mozzarella:

  View code 🐶

  function App() {
    const [queryRef] = useBackgroundQuery(GET_BREEDS_QUERY);
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <Dog name="Mozzarella" queryRef={queryRef} />
      </Suspense>
    );
  }
  
  function Dog({
    name,
    queryRef,
  }: {
    name: string;
    queryRef: QueryReference<BreedData>;
  }) {
    const { data } = useSuspenseQuery(GET_DOG_QUERY, {
      variables: { name },
    });
    return (
      <>
        Name: {data.dog.name}
        <Suspense fallback={<div>Loading breeds...</div>}>
          <Breeds queryRef={queryRef} />
        </Suspense>
      </>
    );
  }
  
  function Breeds({ queryRef }: { queryRef: QueryReference<BreedData> }) {
    const { data } = useReadQuery(queryRef);
    return data.breeds.map(({ characteristics }) =>
      characteristics.map((characteristic) => (
        <div key={characteristic}>{characteristic}</div>
      ))
    );
  }

  For a detailed explanation of useBackgroundQuery and useReadQuery, see our fetching with Suspense reference.

Document transforms 📑

• #10509 79df2c7ba Thanks @jerelmiller! - Add the ability to specify custom GraphQL document transforms. These transforms are run before reading data from the cache, before local state is resolved, and before the query document is sent through the link chain.

  To register a custom document transform, create a transform using the DocumentTransform class and pass it to the documentTransform option on ApolloClient.

  import { DocumentTransform } from "@apollo/client";
  
  const documentTransform = new DocumentTransform((document) => {
    // do something with `document`
    return transformedDocument;
  });
  
  const client = new ApolloClient({ documentTransform: documentTransform });

  For more information on the behavior and API of DocumentTransform, see its reference page in our documentation.

New removeTypenameFromVariables link 🔗

• #10853 300957960 Thanks @jerelmiller! - Introduce the new removeTypenameFromVariables link. This link will automatically remove __typename fields from variables for all operations. This link can be configured to exclude JSON-scalars for scalars that utilize __typename.

  This change undoes some work from #10724 where __typename was automatically stripped for all operations with no configuration. This was determined to be a breaking change and therefore moved into this link.

  For a detailed explanation of removeTypenameFromVariables, see its API reference.

New skipToken sentinel ⏭️

• #11112 b4aefcfe9 Thanks @jerelmiller! - Adds support for a skipToken sentinel that can be used as options in useSuspenseQuery and useBackgroundQuery to skip execution of a query. This works identically to the skip option but is more type-safe and as such, becomes the recommended way to skip query execution. As such, the skip option has been deprecated in favor of skipToken.

  We are considering the removal of the skip option from useSuspenseQuery and useBackgroundQuery in the next major. We are releasing with it now to make migration from useQuery easier and make skipToken more discoverable.

  useSuspenseQuery

  import { skipToken, useSuspenseQuery } from "@apollo/client";
  
  const id: number | undefined;
  
  const { data } = useSuspenseQuery(
    query,
    id ? { variables: { id } } : skipToken
  );

  useBackgroundQuery

  import { skipToken, useBackgroundQuery } from '@apollo/client';
  
  function Parent() {
    const [queryRef] = useBackgroundQuery(
      query,
      id ? { variables: { id } } : skipToken
    );
  
    return queryRef ? <Child queryRef={queryRef} /> : null;
  }
  
  function Child({ queryRef }: { queryRef: QueryReference<TData> }) {
    const { data } = useReadQuery(queryRef);
  }

  For a detailed explanation of skipToken, see its API reference.

New error extraction mechanism, smaller bundles 📉

• #10887 f8c0b965d Thanks @phryneas! - Add a new mechanism for Error Extraction to reduce bundle size by including error message texts on an opt-in basis.

  By default, errors will link to an error page with the entire error message.
  This replaces "development" and "production" errors and works without
  additional bundler configuration.

  Bundling the text of error messages and development warnings can be enabled as follows:

  import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
  if (process.env.NODE_ENV !== "production") {
    loadErrorMessages();
    loadDevMessages();
  }

  For a detailed explanation, see our reference on reducing bundle size.

New @nonreactive directive 🎬

• #10722 c7e60f83d Thanks @benjamn! - Implement a @nonreactive directive for selectively skipping reactive comparisons of query result subtrees.

  The @nonreactive directive can be used to mark query fields or fragment spreads and is used to indicate that changes to the data contained within the subtrees marked @nonreactive should not trigger re-rendering. This allows parent components to fetch data to be rendered by their children without re-rendering themselves when the data corresponding with fields marked as @nonreactive change.

  Consider an App component that fetches and renders a list of ski trails:

  View code 🎿

  const TrailFragment = gql`
    fragment TrailFragment on Trail {
      name
      status
    }
  `;
  
  cons...

v3.8.0-rc.2

3.8.0-rc.2

Minor Changes

• #11112 b4aefcfe9 Thanks @jerelmiller! - Adds support for a skipToken sentinel that can be used as options in useSuspenseQuery and useBackgroundQuery to skip execution of a query. This works identically to the skip option but is more type-safe and as such, becomes the recommended way to skip query execution. As such, the skip option has been deprecated in favor of skipToken.

  We are considering the removal of the skip option from useSuspenseQuery and useBackgroundQuery in the next major. We are releasing with it now to make migration from useQuery easier and make skipToken more discoverable.

  import { skipToken } from "@apollo/client";
  
  const id: number | undefined;
  
  const { data } = useSuspenseQuery(
    query,
    id ? { variables: { id } } : skipToken
  );

  Breaking change

  Previously useBackgroundQuery would always return a queryRef whenever query execution was skipped. This behavior been updated to return a queryRef only when query execution is enabled. If initializing the hook with it skipped, queryRef is now returned as undefined.

  To migrate, conditionally render the component that accepts the queryRef as props.

  Before

  function Parent() {
    const [queryRef] = useBackgroundQuery(query, skip ? skipToken : undefined);
    //      ^? QueryReference<TData | undefined>
  
    return <Child queryRef={queryRef} />;
  }
  
  function Child({
    queryRef,
  }: {
    queryRef: QueryReference<TData | undefined>;
  }) {
    const { data } = useReadQuery(queryRef);
  }

  After

  function Parent() {
    const [queryRef] = useBackgroundQuery(query, skip ? skipToken : undefined);
    //      ^? QueryReference<TData> | undefined
  
    return queryRef ? <Child queryRef={queryRef} /> : null;
  }
  
  function Child({ queryRef }: { queryRef: QueryReference<TData> }) {
    const { data } = useReadQuery(queryRef);
  }

Patch Changes

• #11086 0264fee06 Thanks @jerelmiller! - Fix an issue where a call to refetch, fetchMore, or changing skip to false that returned a result deeply equal to data in the cache would get stuck in a pending state and never resolve.

• #11115 78739e3ef Thanks @phryneas! - Enforce export type for all type-level exports.

• #11103 e3d611daf Thanks @caylahamann! - Fixes a bug in useMutation so that onError is called when an error is returned from the request with errorPolicy set to 'all' .

• #11083 f766e8305 Thanks @phryneas! - Adjust the rerender timing of useQuery to more closely align with useFragment. This means that cache updates delivered to both hooks should trigger renders at relatively the same time. Previously, the useFragment might rerender much faster leading to some confusion.

• #11082 0f1cde3a2 Thanks @phryneas! - Restore Apollo Client 3.7 getApolloContext behaviour

v3.8.0-rc.1

3.8.0-rc.1

Patch Changes

• #11071 4473e925a Thanks @jerelmiller! - #10509 introduced some helpers for determining the type of operation for a GraphQL query. This imported the OperationTypeNode from graphql-js which is not available in GraphQL 14. To maintain compatibility with graphql-js v14, this has been reverted to use plain strings.