Блог

Я изучаю apollo и GraphQL, и у меня есть простое приложение, которое отображает список данных с функцией fetchMore, которая добавляет к массиву.

Я хотел бы удалить updateQuery, поскольку он устарел, и использовать новую функцию слияния политики полей. Текущая настройка кэша и updateQuery выглядит следующим образом:

 const cache = new InMemoryCache({
  typePolicies: {
    client_client: {
      fields: {
        // add local only value to clients
        isEdited: {
          read(value = false) {
            // when writing the new value return new value or false as default
            return value;
          },
        }
      }
    }
  }
});
  

   const onFetchMore = () => {
    fetchMore({
      variables: {
        offset: page
      },
      updateQuery: (previousResult, { fetchMoreResult, queryVariables }) => {
        return {
          ...previousResult,
          client_client: [
            ...previousResult.client_client,
            ...fetchMoreResult.client_client,
          ],
        };
      },
    });
  }
  

Однако, похоже, я не могу заставить его работать как функция слияния в кэше для apollo client v3. Я пытался добавить слияние во многих разных местах, однако, кажется, что это всегда приводит к сбою приложения.

Буду признателен за любую помощь в том, как это сделать.

Согласно документам, определите политику полей в typePolicies опции, предоставленной в InMemoryCache конструкторе:

 const cache = new InMemoryCache({   typePolicies: {
    Query: {
      fields: {
        feed: {
          // Don't cache separate results based on
          // any of this field's arguments.
          keyArgs: false,
          // Concatenate the incoming list items with
          // the existing list items.
          merge(existing = [], incoming) {
            return [...existing, ...incoming];
          },
        }
      }
    }   } })
  

Затем вы просто передаете offset и limit в начальный запрос:

 const { loading, data, fetchMore } = useQuery(GET_ITEMS, {
  variables: {
    offset: 0,
    limit: 10
  },
});
  

и fetchMore для получения следующей итерации:

 fetchMore({
  variables: {
    offset: 10,
    limit: 10
  },
});
  

Ознакомьтесь с документами здесь:https://www.apollographql.com/docs/react/pagination/core-api