运行效用函数而不是组件中的登录突变

Question

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

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

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

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

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

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

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

Answer 1

只要您有权访问 ApolloClient 的实例，就可以调用 mutate method on it directly. You can also pass the client in as a parameter, in which case you might find it helpful get the client instance through the useApolloClient 挂钩。或者，您可以只导出客户端，然后将其直接导入到您的函数中。无论您采用何种方法，只要确保您使用的 ApolloClient 实例与您在应用中其他地方使用的实例相同，即可确保更新正确的缓存。

const client = new ApolloClient({...})

...

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

运行效用函数而不是组件中的登录突变

Running login mutation in utility function instead of component

reactjs

graphql

apollo

react-apollo

apollo-client

运行 效用函数而不是组件中的登录突变

Running login mutation in utility function instead of component

reactjs

graphql

apollo

react-apollo

apollo-client

运行效用函数而不是组件中的登录突变