Реагируйте с Redux Thunk и Apollo Graphql - Как получить доступ к client.query? - PullRequest
Новая
       13

Реагируйте с Redux Thunk и Apollo Graphql - Как получить доступ к client.query?

3 голосов
/ 20 сентября 2019

Это мой 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 определен клиент, который применяет провайдера и внедряет маршруты.Я хотел бы знать, как быть в состоянии выполнить клиент, определенный в приложении, js в welcome.js

Ответы [ 2 ]

1 голос
/ 20 сентября 2019

Настоятельно рекомендуется переключиться на новую версию React Hooks, используя их, вы можете просто написать const client = useApolloClient(), чтобы получить доступ к своему клиентскому экземпляру: 

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

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

  return <h1>Welcome</h1>;
}

А что касается ApolloProvider,он настроен так же, как и вы, за исключением того, что вы можете импортировать его непосредственно из пакета hooks, то есть 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();
0 голосов
/ 20 сентября 2019

Вы можете использовать ApolloConsumer в своем компоненте, чтобы получить доступ к клиенту:

Чтобы получить прямой доступ к клиенту, создайте компонент ApolloConsumer и предоставьте функцию поддержки рендеринга в качестве егоребенок.Функция рендеринга будет вызываться с вашим экземпляром ApolloClient в качестве единственного аргумента.

например 

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

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