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

Question

我正在使用graphQl这个我想设置loading = true1 秒以显示加载器，之后它将通过响应重置我将如何做我现在使用下面的代码，

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

任何帮助表示赞赏。

标签： reactjsreduxgraphqlreact-apollorecompose

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

我还没有测试过。