Apollo Client 是一个强大的 GraphQL 客户端,用于 JavaScript 应用程序。它通过使用 Apollo Link 来处理请求的各个阶段,从而提供了灵活的中间件机制。Apollo Link 是一个用于连接 Apollo Client 和 GraphQL 服务器的链式结构,允许你在请求发送到服务器之前或响应返回到客户端之前对其进行修改或增强。
假设你有一个需要认证的 GraphQL API,并且希望在请求发送之前添加认证头,同时在响应返回时进行错误处理。你可以使用 AuthLink
和 ErrorLink
来实现这一需求。
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import { onError } from '@apollo/client/link/error';
// 创建一个用于添加认证头的 Link
const authLink = setContext((_, { headers }) => {
// 获取认证令牌
const token = localStorage.getItem('token');
// 返回修改后的请求头
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : "",
}
}
});
// 创建一个用于错误处理的 Link
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
);
if (networkError) console.log(`[Network error]: ${networkError}`);
});
// 创建 HttpLink
const httpLink = new HttpLink({ uri: 'https://api.example.com/graphql' });
// 创建 Apollo Client 实例
const client = new ApolloClient({
link: authLink.concat(errorLink).concat(httpLink),
cache: new InMemoryCache()
});
export default client;
通过上述代码,你可以看到如何使用多个 Apollo Link 来处理认证和错误。每个 Link 负责不同的任务,通过 concat
方法将它们串联起来,形成一个完整的请求处理链。
领取专属 10元无门槛券
手把手带您无忧上云