ApolloClient是一个JavaScript的GraphQL客户端,它可以用于在前端应用中发送GraphQL请求到后端服务器。
以下是一个使用ApolloClient的代码示例:
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
// 创建一个HTTP链接
const httpLink = createHttpLink({
uri: 'http://localhost:4000/graphql', // 后端服务器的GraphQL端点
});
// 创建一个认证链接
const authLink = setContext((_, { headers }) => {
// 在这里可以添加认证逻辑,例如添加认证token到请求头部
const token = localStorage.getItem('token');
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : '',
},
};
});
// 创建Apollo客户端
const client = new ApolloClient({
link: authLink.concat(httpLink), // 将认证链接和HTTP链接组合起来
cache: new InMemoryCache(),
});
// 发送GraphQL请求
client.query({
query: gql`
query GetBooks {
books {
title
author
}
}
`,
})
.then(result => console.log(result.data))
.catch(error => console.log(error));
在这个示例中,我们首先导入了ApolloClient和相关的依赖包。然后,我们创建了一个HTTP链接,该链接指向后端服务器的GraphQL端点。接下来,我们创建了一个认证链接,可以在这里添加认证逻辑,例如将认证token添加到请求头部。最后,我们使用这些链接和一个内存缓存来创建了ApolloClient实例。
使用ApolloClient实例,我们可以发送GraphQL请求。在这个示例中,我们发送了一个查询请求,获取了图书的标题和作者。请求的结果将在控制台打印出来。
请注意,上述示例中使用的URI是一个示例URI,你需要将其替换为你实际的后端服务器的GraphQL端点URI。另外,认证逻辑需要根据你的实际需求进行修改。