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

Question

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

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

Answer 1

您可以使用withApollo()从中导出的装饰器apollo-client作为组件内的prop来访问客户端.该ApolloProvider公开client通过上下文及其子组件.的withApollo()高次成分访问client上下文并将它传递给它的子为道具.

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

但是,由于您要访问clientReact树的外部,因此必须以client不同的方式访问它.

或者,您可以导出client作为道具传递的相同内容,ApolloProvider并将其导入到需要在应用程序中使用的任何位置.请注意,此单例模式不适用于服务器端呈现.例:

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>
}

一些-其他-m​​odule.js

import { client } from 'app/root';

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