如何解决如何从阿波罗客户端 3 的响应或缓存中提取数据
我正在尝试从 loginUser 突变中提取 jwt 并将其存储在一个变量中,然后使用 apollo-link 通过“Authorization: Bearer ${token} 对标头的 setContext 进行身份验证,就像我的所有其他突变和查询一样需要令牌。我已经在 Apollo Client(React) -v 3.3.20 上抨击文档好几天了。我已经浏览了所有文档,他们展示了 client.readQuery 和 writeQuery 的所有这些示例,坦率地说似乎只是重新获取数据? 我不明白您实际上是如何从响应中提取数据并将其存储在变量中的。
响应存储在缓存中,我不知道如何获取该数据并将其存储在令牌变量中,如上所述。哪些远程查询我只能通过来自 useQuery 钩子的数据对象访问返回的数据,但是在 useMutation 钩子上,数据返回未定义。关于堆栈溢出,我唯一能找到的就是我的数据类型可能是自定义类型或非传统类型,但不确定这是否是问题所在。
[在 apollo 开发工具中缓存][1]
[apollo 开发工具中的突变][2]
[网络选项卡中的响应][3]
这是我的 ApolloClient 配置:
const httpLink = createHttpLink({ uri: 'http://localhost:4000/',// credentials: 'same-origin'
});
const authMiddleware = new ApolloLink((operation,forward) => {
const token = localStorage.getItem('token');
// add the authorization to the headers
operation.setContext(({ headers = {} }) => ({
headers: {
...headers,authorization: `Bearer ${token}` || null,}
}));
return forward(operation);
})
const client = new ApolloClient({
cache: new InMemoryCache(),link: concat(authMiddleware,httpLink),});
标题显然有效,我只是无法获取要传递的令牌,因此标题仅发送 Authorization: Bearer。
const LOGIN_USER = gql`
mutation($data:LoginUserInput!) {
loginUser(
data: $data
) {
user {
id
name
}
token
}
}
`;
const [loginUser,{ data,loading,error }] = useMutation(LOGIN_USER);
if (loading) return 'Submitting...';
if (error) return `Submission error! ${error.message}`;
本来我只是打电话
onClick={loginUser( { variables })}
对于登录,但 onComplete 永远无法工作,无论我在哪里看到,我都会看到很多关于它的帖子,但没有解决方案。所以我试着把所有东西都塞进一个函数中,然后我在里面用 loginUser 调用:
const submit = async () => {
loginUser({ variables})
// const { user } = await client.readQuery({
// query: ACCESS_TOKEN,// })
// console.log(`User : ${JSON.stringify(user)}`)
const token = 'token';
const userId = 'userId';
// console.log(user);
// localStorage.setItem(token,'helpme');
// console.log({data});
}
在这一点上,我只是花了几个小时又几个小时,只是尝试无意识的东西,以可能获得一些关于去哪里的线索。
但是说真的,useMutation 中的 { data } 甚至在未定义的情况下会做什么。对我来说,从 useQuery 调用 data.foo 非常好,但是 useMutation 它是未定义的。
非常感谢任何帮助。 [1]:https://i.stack.imgur.com/bGcYj.png [2]:https://i.stack.imgur.com/DlzJ1.png [3]:https://i.stack.imgur.com/D0hb3.png
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。