How to re-render in react after x-time (Mutation Apollo) - graphql

Question

I am sending a bulk data request to Shopify graphql to get all the products in the store, which may take a while depending on how many products the store has, so instead of using useQuery, Shopify recommends to send a bulk request using useMutation more on that here , anyway here is my code.
const BULK_INIT_MUTATION = gql`
mutation {
bulkOperationRunQuery(
query: """
{
products {
edges {
node {
id
images{
edges{
node{
id
originalSrc
altText
}
}
}
}
}
}
}
"""
) {
bulkOperation {
id
status
}
userErrors {
field
message
}
}
}
`;
const Index = () => {
const [createBulkRequest, { data }] = useMutation(BULK_INIT_MUTATION);
createBulkRequest();
return <Page>Hi Index</Page>;
};
Above should initiate a bulk request to shopify and as per Shopify docs it will take them anything between couple seconds to couples minutes to have the data ready for me to fetch using useQuery with below query
query {
currentBulkOperation {
id
status
errorCode
createdAt
completedAt
objectCount
fileSize
url
partialDataUrl
}
}
When everything is all good above query will return something like this
{
"data": {
"currentBulkOperation": {
"id": "gid:\/\/shopify\/BulkOperation\/720918",
"status": "COMPLETED",
"errorCode": null,
"createdAt": "2019-08-29T17:16:35Z",
"completedAt": "2019-08-29T17:23:25Z",
"objectCount": "57",
"fileSize": "358",
"url": "https:\/\/storage.googleapis.com\/shopify\/dyfkl3g72empyyoenvmtidlm9o4g?<params>",
"partialDataUrl": null
}
},
...
}
now all I am interested at is the url value, which should link to an address where I can get the actual data.
Now the issue is unless the Shopify Server had all the time it needed to process my request, it will always return the url value as undefined, what I need is a way to maybe constantly request the data after x time until it finally returns the url hence the operation status's completed and then re-render.
I am not sure what's the best way to approach this is, I am thinking something like setInterval, but I'm really not sure. so any suggestion would be quite helpful as I've been stuck with this for couple days now?
I have already tried useEffect like below
const Index = () => {
const [response, setData] = useState({});
const [createBulkRequest, { data }] = useMutation(BULK_INIT_MUTATION);
createBulkRequest();
useEffect(() => {
const timer = setInterval(() => {
const { loading, error, data } = useQuery(BULK_STATUS_QUERY);
console.log('returned data', data);
setData(data);
}, 5000);
// clearing interval
return () => clearInterval(timer);
});
return <Page>Hi Index</Page>;
};
However doing this throws this error.
Unhandled Runtime Error Error: Invalid hook call. Hooks can only be
called inside of the body of a function component. This could happen
for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug
and fix this problem.

Answer 1

If you need to schedule some task after x amount of time in order to retrieve data and update some state if defined, then you can use the setInterval() method calls a function in a useEffect hook (make sure to clear your interval in the return of that useEffect)