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

Posted 2023-02-21

【中文标题】如何在graphql查询中设置loading true。？

【英文标题】：How to set loading true in graphql query.?

【发布时间】：2019-12-12 23:13:16

【问题描述】：

我在这里使用graphQl 我想设置loading = true 1 秒钟以显示 loader 之后它将通过响应重置我将如何做到这一点 我现在正在使用下面的代码，

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

感谢任何帮助。

【参考方案1】：

好吧，您可以使用自定义提取。这样的事情可能会奏效：

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 本身的解决方案