在 apollo-client 中，我如何能够记录或拦截所有操作（查询和突变）

Question

出于分析目的，我想在客户端跟踪所有 graphql 操作（包括 @client 操作）。我无法在 API 中找到合适的选项，想知道这是否可以在 apollo-client 级别上实现，或者我是否需要引入一些代理来拦截我自己的调用？

Answer 1

自定义 Apollo link 是一个不错的选择。

您可以特别使用 apollo-link-logger 将所有操作记录到控制台。

用法（来自文档）：

import apolloLogger from 'apollo-link-logger';

// ...
ApolloLink.from([
  apolloLogger,
  // ...
]);

注意：将 apolloLogger 放在其他 link 之前。

输出示例：

Answer 2

由于 Yuriy 的回答正是我要找的，所以我将其标记为已接受的答案 - 谢谢！

这里的记录仍然是为我工作的代码 - 我相信有人可能会发现它有用，也值得展示它的简单性。

值得注意的是 Apollo links 是可链接的——因此 link 函数的参数是 operation: Operation 和 forward: NextLink 应该从我们的调用link 实施。

let analytics: Analytics; // this is Fabric.io Analytics to be provided by DI
const analyticsLink = new ApolloLink((
    operation: Operation,
    forward?: NextLink
) => {
    const operationType = operation.query.definitions[0].operation;
    return forward(operation)
        .map((result: FetchResult) => {
            try {
                analytics.sendCustomEvent(`${operationType}.${operation.operationName}`);
            } catch (e) {
                console.error('analytics error', e);
            }
            return result;
        });
});

作为奖励，我们还可以使用 apollo-link-error 捕获错误（即利用 fabric.io crashlytics）（Apollo 中的错误处理有点复杂）；

const analyticsErrorLink = onError((error: ErrorResponse) => {
    try {
        // it's worth to rethink what we wanna log here
        const message = error.graphQLErrors ? error.graphQLErrors[0].message :
            (error.networkError.name + ': ' + error.networkError.message);
        analytics.sendNonFatalCrash('GraphQL error: ' + message);
    } catch(e) {
        console.error('cannot report error to analytics', e);
    }
});

最后，为了组成 links，我们应该将我们的拦截实现放在开头，这样我们就能够捕获所有 GraphQL 操作，包括那些未到达网络 @client 标记的操作 link - 在我的例子中完整的 link 看起来像：

ApolloLink.from([
    analyticsErrorLink,
    analyticsLink,
    stateLink,
    auth,
    http])

在 apollo-client 中，我如何能够记录或拦截所有操作（查询和突变）

in the apollo-client how I may be able to log or intercept all the operations (queries and mutations)

apollo

apollo-client