Блог

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

 const PAGINATE = gql`  query test($first: Int!, $after: String) {  books(first: $first, after: $after) {  totalCount  pageInfo {  hasNextPage  hasPreviousPage  startCursor  endCursor  }  edges {  node {  title  id   author {  name  id  }  }  }  }  } `  

и вот код для работы с разбиением на страницы (я использую react):

 { data?.books?.pageInfo?.hasNextPage amp;amp;  (  lt;button  onClick={() =gt; {  fetchMore({  variables: {  first: 2,  after: data.books.pageInfo.endCursor  }  });  }}  gt;  Load More  lt;/buttongt;  )  }  

Так что все это работает хорошо, и там, где у меня куча проблем, находится файл кэша. Я не могу понять, почему это не работает. Когда страница загружается, появляются две карточки с надписями «книга 1» и «книга 2». Когда я нажимаю на кнопку загрузить больше, появляются две карточки, на которых показана книга 3, книга 4, но они заменяют книгу 1 и книгу 2.

вот код кэша:

 export const cache = new InMemoryCache({  typePolicies: {  Query: {  fields: {  books: {  keyArgs: false,    merge(existing, incoming) {  let books = [];   if (existing?.books) {  books = [...books, ...existing.books]  }    if (incoming?.edges) {  books = [...books, ...incoming.edges]  }   return {  ...incoming,  books  }  }    }  }  }  }  });  

Опять же, здесь все работает, я просто не могу понять, почему следующие два элемента функции fetchMore заменяют последние два, а не добавляются. Здесь используется оператор распространения, поэтому я не понимаю, в чем проблема.