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.

Rituraj ratan
  • 10,260
  • 8
  • 34
  • 55

1 Answers1

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.

nergalino
  • 51
  • 5