Apollo 客户端延迟请求

Question

我对 Apollo 客户端有一个非常奇怪的问题。

我们正在使用 [email protected] 和 React ([email protected])。 在我们的项目中，我们注意到 apollo 在发送请求之前总是等待 1 到 2 秒。

情况截图如下：

这就是我们的客户端配置的样子：

    const customNetworkInterface = {
    query: request =>
        fetch('/graphql', {
            method: 'POST',
            credentials: 'include',
            mode: 'cors',
            cache: 'default',

            headers: {
                Accept: '*/*',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                ...request,
                query: print(request.query),
            }),
        })
            .then(resp => resp.json())
            .then(({ data, errors }) => {
                if (errors) {
                    const userErrors = errors
                        .filter(({ code }) => +code >= 400 && +code <= 401)
                        .map(({ message }) => message)
                        .join('\n');
                    const serverErrors = errors
                        .filter(
                            ({ code }) => !code || (+code < 400 && +code > 401)
                        )
                        .map(({ message }) => message)
                        .join('\n');
                    if (serverErrors.length > 0) {
                        error(serverErrors);
                        if (isProduction) {
                            window.triggerAlert(
                                'danger',
                                'The server encountered an error. Our technical team has been notified.'
                            );
                        } else {
                            window.triggerAlert('danger', serverErrors);
                        }
                    } else if (userErrors.length > 0) {
                        window.triggerAlert('danger', userErrors);
                    }
                }

                return { data, errors };
            }),
};

const networkInterface = createNetworkInterface({
    uri: '/graphql',
    opts: {
        credentials: 'same-origin',
    },
});
networkInterface.useAfter([
    {
        applyAfterware({ response }, next) {
            response
                .clone()
                .json()
                .then(responseJson => {
                    if (responseJson.errors) {
                        error(
                            responseJson.errors
                                .map(({ message }) => message)
                                .join('\n')
                        );
                    }
                    next();
                });
        },
    },
]);

export const client = new ApolloClient({
    networkInterface: customNetworkInterface,
    queryDeduplication: true,
    addTypename: true,
});

然后查询代码是用react-apollo：

graphql(RaceResultsQuery, {
    props: ({ ownProps, data }) => ({
        race_results: _.get(data, 'me.my_race_results', []),
    }),
}),

Answer 1

这需要一个完整的、最小的示例来提供确定的答案（在问题仍然发生的情况下删除尽可能多的代码）。

我的猜测是，您的父组件具有非常昂贵的查询，并且它仅在昂贵的查询返回后才呈现具有延迟查询的组件。

Answer 2

我的项目也出现这个问题 Chrome 网络选项卡中有 4 个传出的 graphQL 订阅请求 他们的时间差距正好是1.2秒