在实用程序函数而不是组件中运行登录突变

Posted 2023-03-10

【中文标题】在实用程序函数而不是组件中运行登录突变

【英文标题】：Running login mutation in utility function instead of component

【发布时间】：2021-02-27 16:55:10

【问题描述】：

这个问题可能是我对 Apollo/React/GraphQL 哲学的误解的表现，但我有点卡在这里。

我正在为我的单页应用程序编写身份验证逻辑。我有一个带有 GraphQL API 的后端，它通过返回 JWT 访问/刷新令牌对来验证用户。因此，要登录，我需要从我的应用程序向 GraphQL 端点发送一个突变。

我的前端使用 Apollo 客户端。现在我知道我可以使用useMutation 运行突变，我了解它是如何工作的。但我也知道需要在组件顶部指定 React Hooks。我可以在登录组件中调用useMutation，但这感觉像是糟糕的封装。

问题是我想要一个单独的login 实用函数，它接受用户名和密码，将登录突变请求发送到后端，然后返回响应。

据我了解，我不能在这里使用useMutation，因为我不在 React 组件中。我当然可以写一个fetch给自己打电话：

export const login = (username, password) => 
    return fetch("/api", 
        method: "POST",
        ...

但是当我在 Apollo Client 生态系统中工作时，这感觉不干净。我是否遗漏了什么，我应该继续使用这些手动获取调用，还是我误解了这里的整个哲学？

【参考方案1】：

只要你有权访问ApolloClient 的实例，你就可以直接在其上调用mutate 方法。您还可以将客户端作为参数传入，在这种情况下，您可能会发现通过useApolloClient 挂钩获取客户端实例很有帮助。或者，您可以只导出客户端，然后将其直接导入您的函数中。无论您采用哪种方法，只要确保您使用的 ApolloClient 实例与您在应用中其他地方使用的实例相同，以确保您更新了正确的缓存。

const client = new ApolloClient(...)

...

const  data, errors  = await client.mutate(...)

【讨论】：

谢谢丹尼尔，这回答了我的问题。我意识到我还有一些关于我的应用架构的事情要弄清楚......可能很快就会发布另一个更广泛的问题。