Answer the question
In order to leave comments, you need to log in
How to fix a bug with InMemoryCache so as not to lose the results of previous queries in GraphQL?
In a React application, I did an infinite scroll requesting data from a GraphQL query. But he incorrectly implemented caching of previous loaded results, as a result of which, when scrolling, new results are not added to previously loaded ones, but replace them.
I use Apollo, did according to their documentation, but I can't figure out InMemoryCache.
This is what the query looks like:
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) => (
...
))}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question