0

我正在尝试从 loginUser 突变中提取 jwt 并将其存储在变量中，然后使用 apollo-link 通过“Authorization: Bearer ${token} 进行身份验证，因为我的所有其他突变和查询都需要令牌. 我几天来一直在抨击 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

4

0 回答 0