Reactjs 如何在graphql查询中设置loading true。？

我正在使用

graphQl

在这里，我想设置

loading=true

1秒，以显示加载程序，然后它将通过响应重置，我将如何做 我现在正在使用下面的代码

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', []),
           };
    },
});

---

感谢您的帮助

那么，您可以使用自定义获取。类似的方法可能会奏效：

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', []),
           };
    },
});

---

我还没有测试过它。

我期待着graphql本身的解决方案