即使没有 UI，我是不是需要绑定到组件才能使用 apollo react 客户端？

Posted 2023-03-10

【中文标题】即使没有 UI，我是不是需要绑定到组件才能使用 apollo react 客户端？

【英文标题】：Do I need to bind to a component to use the apollo react client even if it has no UI?即使没有 UI，我是否需要绑定到组件才能使用 apollo react 客户端？

【发布时间】：2017-03-30 19:30:55

【问题描述】：

我正在围绕 Auth0 锁定小部件的实现执行一些业务逻辑，并且需要调用一些 graphql 突变来登录。在这种情况下，没有要呈现的 UI，因为它只是对 Auth0 的 lock.show() 的调用方法。但是，查看所有带有 react 的 apollo 客户端示例 - graphql 方法似乎将函数绑定到组件。

我可以直接调用 gql 突变而不将其绑定到反应组件吗？ 如果我不在组件中，从 ApolloProvider 获取客户端的最佳方式是什么？是否有可以从 ApolloProvider 引用的静态单例实例，还是需要从根应用程序组件传递客户端引用？

【参考方案1】：

您可以使用从apollo-client 导出的withApollo() 装饰器作为组件内的道具访问客户端。 ApolloProvider 通过上下文向其子组件公开client。 withApollo() 高阶组件在上下文中访问 client 并将其作为道具传递给其子组件。

因此，如果 auth.lock() 函数被某种类型的 UI 交互或 React 生命周期方法之一触发，您可以访问该组件中的 client 并直接在组件中调用突变或传递它作为调用auth.lock()的函数的参数。

但是，由于您想在 React 树之外访问 client，因此您必须以不同的方式访问 client。

或者，您可以将作为道具传递给ApolloProvider 的相同client 导出，然后将其导入应用程序中需要使用的任何位置。请注意，此单例模式不适用于服务器端渲染。示例：

root.jsx

import React from 'react';
import  Router, browserHistory  from 'react-router';
import ApolloClient,  createNetworkInterface  from 'apollo-client';
import  syncHistoryWithStore  from 'react-router-redux';
import routes from './routes';

const networkInterface = createNetworkInterface(
  uri: '/graphql',
  opts: 
    credentials: 'same-origin'
  
);

export const client = new ApolloClient(
  networkInterface
);
export const store = configureStore(browserHistory, client);
export const history = syncHistoryWithStore(browserHistory, store);

export default function Root() 
  <ApolloProvider client=client store=store>
    <Router
      history=history
      routes=routes
    />
  </ApolloProvider>

some-other-module.js

import  client  from 'app/root';

export default function login(username, password) 
  return client.mutate(
    // ...mutationStuff
  );

【讨论】：

我可以用同样的方式做 client.query 吗？

【参考方案2】：

你可以像这样导入ApolloProvider：

import ApolloProvider from "@apollo/client";