0

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.

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

1 Comment

i am expecting a solution with graphql itself

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.