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

Posted 2023-03-08

【中文标题】使用 Redux Thunk 和 Apollo Graphql 做出反应 - 如何访问 client.query？

【英文标题】：React With Redux Thunk and Apollo Graphql - How to access client.query?

【发布时间】：2020-01-21 15:48:12

【问题描述】：

这是我的 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:"[e-mail]"
           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中

【参考方案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>
);

【参考方案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();

【讨论】：

事实上，欢迎任何好的建议，埃德蒙多！谢谢 ！我会尽快测试它

所以，如果您想使用钩子编辑解决方案的答案...请随意

刚刚添加了一个使用钩子的示例。