I'm pretty new to GraphQL and I enountered an issue. The issue is: I have a list of tags that are around 40. so when I try to fetch the data initially, it returns a 30 tags and an end cursor:
const result = useGetTagListQuery({
variables: {
contains: searchText
}
});
--
export function useGetTagListQuery(baseOptions?: Apollo.QueryHookOptions<GetTagListQuery, GetTagListQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetTagListQuery, GetTagListQueryVariables>(GetTagListDocument, options);
However, when I try to refetch the next set of data using the EndCursor, it seems that its always fetching the first 30 instead of the next tag items, doubling the existing list with duplicates.
<DataTable
showDescriptionColumn
style={{ flex: 1 }}
onSelected={handleDataTableOnSelected}
onSearchBoxChanged={handleSearchBoxonChanged}
isLoading={result.loading}
data={result.data?.TagList?.nodes}
customProps={[{ id: "type", name: "Type" }]}
fetchMore={() => result.data?.TagList?.pageInfo?.hasNextPage && result.fetchMore({
variables: {
contains: searchText,
after: result.data?.TagList?.pageInfo.endCursor
},
updateQuery: (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) return previousResult;
const previousContents = result.data?.TagList?.nodes || [];
const newContents = fetchMoreResult.TagList?.nodes || [];
return {
...previousResult,
TagList: {
nodes: [...previousContents, ...newContents],
pageInfo: fetchMoreResult.TagList?.pageInfo as any
}
};
}
})} />
I'm not sure what I am missing. I checked endcursor value and its not null and holds the correct cursor value for the next page.