Reputation: 902
I converted a class component into a function component to make use of React Hooks. The graphQl query is called as follows:
const { data, error, loading, fetchMore } = useQuery(getAll, {
variables: {
code: props.code,
type: props.type,
page: 0
}
});
fetchMore
function is what I'm looking for. I checked several tutorial, they all implement the fetchMore
function on onClick trigger.
My question is:
Is it possible to call fetchMore
without trigger an event? So that it's called conditionally when a variable is set?
UPDATE 1
As suggested I tried the useEffect
hook. Here is the code:
useEffect(() => {
if(data != null) {
const { nextLink } = data.list.nextLink;
if(nextLink !== []){
fetchMore({
variables: {
code: props.code,
type: props.type,
page: page+1
},
updateQuery: (prevResult, { fetchMoreResult }) => {
fetchMoreResult.list = [
...prevResult.list,
...fetchMoreResult.list
];
return fetchMoreResult;
}
});
}
}
});
However it calls the query only once. How can I trigger that query multiple times until nextLink is not empty? And then update the results?
UPDATE 2
After some work I'm able to call all the pages and fetch the data. Here is what I did.
I added the page field in the backend query, which is used as a variable to be passed back and forth to the query calls. Moreover, this page variable is increased at each call. Also, the fetchmore function is called only when nextLink is empty. However, currently the page display only the last page results, since the new result replace the old data.
Here is the code:
let [hasNext, setHasNext] = useState(true);
useEffect(() => {
if(data != null) {
const { nextLink, page } = data.list;
let isNext = (nextLink !== "") ? true : false;
setHasNext(isNext);
if(hasNext){
const { data } = fetchMore({
variables: {
code: props.code,
type: props.type,
page: parseInt(page)
},
updateQuery: (prevResult, { fetchMoreResult }) => {
fetchMoreResult = {
...prevResult,
...fetchMoreResult,
};
return fetchMoreResult;
}
});
}
}
});
The spread operator doesn't seem to work. How can I append the new data fetched to the old results?
Upvotes: 2
Views: 4740
Reputation: 902
After some attempts, here is my solution. As suggested in the comments, to trigger the same query multiple times I should use fetchMore
inside the useEffect
hook.
Here is the code:
useEffect(() => {
if(data != null) {
if(data.list !== []){
const { nextLink, page } = data.list;
let isNext = (nextLink !== "") ? true : false;
setHasNext(isNext);
if(hasNext && page != null){
const { data } = fetchMore({
variables: {
code: props.code,
type: props.type,
page: page
},
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) {
return prev;
}
return {
list: {
...prev.list,
...fetchMoreResult.list,
array: [
...prev.list.array,
...fetchMoreResult.list.array,
],
},
};
}
});
} else {
setLoadingState(false);
}
}
}
});
The graphQL query is as follows:
query($code: String, $type: Int, $page: Int) {
list(code: $code, type: $type, page: $page) {
array {
ID
title
field_firstname
field_lastname
}
nextLink
page
}
}
Upvotes: 1