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

Question

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

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

Answer 1

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

因此，如果 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>
}

其他-module.js

import { client } from 'app/root';

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

Answer 2

您可以像这样导入 ApolloProvider：

import { ApolloProvider } from "@apollo/client";

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

Do I need to bind to a component to use the apollo react client even if it has no UI?

react-apollo