В приложении на React сделал бесконечную прокрутку, запрашивая данные из GraphQL query. Но неправильно реализовал кеширование предыдущих загруженных результатов, в следствие чего при прокрутке новые результаты не добавляются к ранее загруженным, а заменяют их.
Использую Apollo, делал по их документации, но не могу разобраться с InMemoryCache.
Так выглядит query:
export const getEmailsQuery = gql`
query GetEmails($offset: Int, $limit: Int) {
getEmailAccounts(userInput: { offset: $offset, limit: $limit }) {
id
userId
email
dateCreated
dateUpdated
}
}
`;
const [offset, setOffset] = useState(0); // прибавляю offset после каждой прокрутки до конца экрана
const {
data: emailsData,
loading: emailsDataLoading,
fetchMore: emailsFetchMore,
refetch: emailsRefetch,
} = useQuery(getEmailsQuery, {
variables: {
offset,
limit: 20,
},
});
const cache = new InMemoryCache({
typePolicies: {
GetEmails: {
fields: {
getEmailAccounts: {
keyArgs: [],
merge(existing, incoming, { args: { offset }}) {
const merged = existing ? existing.slice(0) : [];
for (let i = 0; i < incoming.length; ++i) {
merged[offset + i] = incoming[i];
}
return merged;
}
}
}
}
}});
const handleScroll = async () => {
if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
await emailsFetchMore({
variables: {
offset
},
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) return prev;
return Object.assign({}, prev, {
feed: [...prev.feed, ...fetchMoreResult.feed]
});
}
});
setOffset(offset + 20);
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
Отображаю результаты
{emailsData &&
emailsData.getEmailAccounts.map((e, i) => (
...
))}
Если сделать console.log(cache), то в нём я не нахожу данных.
Подскажите, где я ошибся.