如何从阿波罗客户端 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 (将#修改为@）

apollo-cache-inmemory apollo-client bearer-token http-headers react-apollo