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

Question

我正在做一些关于Auth0锁小部件的实现的业务逻辑，并且需要调用一些graphql突变来登录。在这种情况下，由于只是调用Auth0的lock.show（）方法。然而，用反应来查看所有apollo客户端示例 - graphql方法似乎将函数绑定到组件。

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

Answer 1

您可以使用从apollo-client导出的withApollo()装饰器作为组件内的道具访问客户端。 ApolloProvider通过上下文将client公开给其子组件。高阶组件在上下文上访问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> 
} 

一些，其他-module.js

import { client } from 'app/root'; 

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