How to set loading true in graphql query.? - reactjs

Question

I am using graphQl in this i want to set loading = true for 1 second to show loader after that it will reset by response how will i do that
i am using below code right now,
const loadData = graphql(initialData, {
options: ({ params: { Id }, authData: { userPermissions } }) => ({
variables: {
Id,
Settings: hasPermissions(userPermissions, [USER_PERMISSIONS.du]),
},
fetchPolicy: APOLLO_FETCH_POLICIES.NETWORK_ONLY,
errorPolicy: APOLLO_ERROR_POLICIES.ALL,
notifyOnNetworkStatusChange: true,
}),
// skip: props => props.loading = true,
props: ({ data }) => {
const { error, loading, refetch, networkStatus, buy, timeZones, manager } = data;
return {
error:error,
loading: networkStatus === 1 && !loading ? true : loading,
networkStatus,
onReload: refetch,
timeZones,
manager: get(manager, 'itUsers', []),
};
},
});
Any help is appreciated.

Answer 1

Well, you can use custom fetch. Something like this might work:
const customFetch = (url, {delay, ...opts}) => {
return Promise.all([
fetch(url, opts),
new Promise(resolve => setTimeout(resolve, delay || 0)),
]).then(([res, _]) => res)
}
const uploadLink = createUploadLink({
uri,
fetch: customFetch,
})
const client = new ApolloClient({
cache,
link: uploadLink,
})
//////////////////////////////////////////////
// Then you can add delay option via context
//////////////////////////////////////////////
const loadData = graphql(initialData, {
options: ({ params: { Id }, authData: { userPermissions } }) => ({
variables: {
Id,
Settings: hasPermissions(userPermissions, [USER_PERMISSIONS.du]),
},
fetchPolicy: APOLLO_FETCH_POLICIES.NETWORK_ONLY,
errorPolicy: APOLLO_ERROR_POLICIES.ALL,
notifyOnNetworkStatusChange: true,
///////////////////////////////////////////
// add context with delay
context: {
fetchOptions: {delay: 1000},
///////////////////////////////////////////
},
}),
// skip: props => props.loading = true,
props: ({ data }) => {
const { error, loading, refetch, networkStatus, buy, timeZones, manager } = data;
return {
error:error,
loading: networkStatus === 1 && !loading ? true : loading,
networkStatus,
onReload: refetch,
timeZones,
manager: get(manager, 'itUsers', []),
};
},
});
I have not tested it.