7

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

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

2 回答 2

10

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

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

但是，由于您想访问clientReact 树的外部，您必须以client不同的方式访问。

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

根.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
  });
}
于 2016-11-17T19:04:18.677 回答
2

您可以像这样导入ApolloProvider：

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

于 2020-08-21T22:46:07.410 回答