@apollo/client 3.9.0-beta.0

v3.9.0-beta.0

on Node.js Yarn

Minor Changes

• #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);
  
    // ...
  }

• #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.

• #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
  }

• #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()
      },
    },
  });

• #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.

Patch Changes

• #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

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