拦截 Apollo/graphql 请求答案

【问题标题】：Intercept Apollo/graphql requests拦截 Apollo/graphql 请求
【发布时间】：2018-11-02 00:28:53
【问题描述】：

我们正在我们的应用程序中使用 Apollo/Graphql，但我们遇到了一个问题。

该应用程序是在 Angular 5 中开发的，NodeJS 作为后端，带有将响应前端的 graphql 服务器。为了以角度拦截 Http 请求，我们实现了“HttpInterceptor”，以便我们可以以自定义方式处理错误。但是，Apollo 请求不会通过这个拦截器。

为了正确处理错误，我们使用了“apollo-link-error”。

但我们想知道是否有可能以与 HttpInterceptor 类似的方式拦截 apollo 请求。

【问题讨论】：

标签： angular error-handling apollo apollo-client express-graphql

【解决方案1】：

我认为拦截 Apollo Client 请求的官方方式是通过 Apollo Links。

但是，如果您使用的是 Angular，也可以通过 HttpInterceptor 来完成。你可以看看我在使用 Apollo Client 时在how to manage access/refresh tokens using Angular's HttpInterceptor 上发布的这篇文章。

希望这会有所帮助。

【讨论】：

您在博客中提到“apollo-angular-link-http 在后台使用 HttpClient”，我想知道它是使用 Angular HttpClient 的 Apollo Links 还是技术上它的 Apollo Angular Client 也使用 HttpClient 下引擎盖？

【解决方案2】：

您好，我遇到了同样的问题，

一个红色的：

Apollo Links 创建允许您修改请求的中间件在它们被发送到服务器之前

Apollo Middleware

Apollo 2.0 Auth

示例如下：

import { HttpHeaders } from '@angular/common/http';
import { Apollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

@NgModule({ ... })
class AppModule {
  constructor(
    apollo: Apollo,
    httpLink, HttpLink
  ) {
    const http = httpLink.create({uri: '/graphql'});

    const auth = setContext((_, { headers }) => {
      // get the authentication token from local storage if it exists
      const token = localStorage.getItem('token');
      // return the headers to the context so httpLink can read them
      // in this example we assume headers property exists
      // and it is an instance of HttpHeaders
      if (!token) {
        return {};
      } else {
        return {
          headers: headers.append('Authorization', `Bearer ${token}`)
        };
      }
    });

    apollo.create({
      link: auth.concat(http),
      // other options like cache
    });
  }
}

【讨论】：

感谢您的回答和您的宝贵时间。是的，我完全同意，我们在发出请求之前使用它来设置我们的标头。但是我们正在寻找一种与 HttpInterceptor 相同的方法来处理错误；
嗨，“与 HttpInterceptor 相同”是什么意思
您可以使用 Afterwares：'Afterware' 与中间件非常相似，只是在发出请求后运行后件，即处理响应的时间我>

【解决方案3】：

我最近遇到了同样的问题，并且能够通过捕获响应并对其进行修改来解决它。

import { asyncMap } from '@apollo/client/utilities';
import {
  concat
} from '@apollo/client';    


return asyncMap(forward(operation), async (response) => {
        let data: any = response.data;
        
        // modify anything you want here
    
        return response;
      });
    });

const client = new ApolloClient({


 link: concat(authMiddleware, httpLink),
  cache: new InMemoryCache(),
});

它是一个不同的库，但你可以尝试这样的东西。

【讨论】：