使用 Redux Thunk 和 Apollo Graphql 做出反应 - 如何访问 client.query？

Question

这是我的 app.js

import React from 'react'
import { Provider } from 'react-redux'
import { View } from 'react-native'
import { createStore, applyMiddleware } from 'redux'
import ReduxThunk from 'redux-thunk'
import Reducers from './redux'
import Routes from './config/routes'
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'

const cache = new InMemoryCache();
const client = new ApolloClient({
cache,
link: new HttpLink({
    uri: '...',
}),
})

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        initialized: true
    }
}
render() {
    return (
        <View style={{ flex: 1 }}>
            <ApolloProvider client={client}>
                <Provider store={store}>
                    <Routes />
                </Provider>
            </ApolloProvider>
        </View>
    )
}
}
const store = createStore(Reducers, {}, applyMiddleware(ReduxThunk))
export default App

好的，到目前为止...基本。

这将渲染我的路由的初始文件：welcome.js

import React from 'react'
import {...} from 'react-native'
import { Actions } from 'react-native-router-flux'
import style from './style'
import { connect } from "react-redux"
import gql from 'graphql-tag'

class Welcome extends React.Component {
    constructor(props) {

       const LOGIN_MUTATION = gql`
         mutation {
          login(
           email:"test@test.com"
           password:"1234"
      ) {token}
     }
    `
// Bellow will not work..I've no idea how to call the client that
// I set at <ApolloProvider client={client}>
client
   .mutate({
    mutation: LOGIN_MUTATION
})
.then(res => console.log(res))
.catch(err => console.log(err))
    }
}
const mapStateToProps = state => (
{

}
)

export default connect(mapStateToProps,
{

})(Welcome)

所以，客户端是在我的 app.js 上定义的，它应用了提供者并注入了路由。 我想知道如何能够将 app,js 中定义的客户端执行到welcome.js中

Answer 1

您可以在组件中使用ApolloConsumer 来访问客户端：

要直接访问客户端，请创建一个 ApolloConsumer 组件并提供一个 render prop 函数作为其子组件。 render prop 函数将使用您的 ApolloClient 实例作为其唯一参数调用。

例如

import React from 'react';
import { ApolloConsumer } from "react-apollo";

const WithApolloClient = () => (
  <ApolloConsumer>
    {client => "We have access to the client!" /* do stuff here */}
  </ApolloConsumer>
);

Answer 2

强烈建议您切换到新的 React Hooks 版本，使用它们，您只需编写 const client = useApolloClient() 即可访问您的客户端实例：

import { useApolloClient } from '@apollo/react-hooks';

const Welcome = () => {
  const client = useApolloClient();

  return <h1>Welcome</h1>;
}

关于ApolloProvider，它的配置方式与您所做的相同，只是您也可以直接从钩子包中导入它，即import { ApolloProvider } from '@apollo/react-hooks——因此您可以删除react-apollo。

在此处查看有关钩子的更多详细信息：https://www.apollographql.com/docs/react/hooks-migration/。

但如果你真的想继续使用类组件，你可以这样做：

import { getApolloContext } from 'react-apollo';

class Welcome extends React.Component {
  ...
}

Welcome.contextType = getApolloContext();

然后你就可以在你的类中使用this.context.client 访问客户端了：

class Welcome extends React.Component {
  render() {
    console.log('client', this.context.client);

    return ...;
  }
}

Welcome.contextType = getApolloContext();