React With Redux Thunk and Apollo Graphql - How to access client.query?

Question

This is my 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

Ok, so far...basic.

This will render the initial file of my route: 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)

So, the client was defined on my app.js that's apply the provider and inject the routes. I'd like to know how to be capable to execute the client defined at app,js into welcome.js

Answer 1

It's highly recommended that you switch for the new React Hooks version, using them, you can simply write const client = useApolloClient() to get access to your client instance:

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

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

  return <h1>Welcome</h1>;
}

And regarding the ApolloProvider, it is configured in the same manner was you did, except that you can import it directly from the hooks package too, i.e import { ApolloProvider } from '@apollo/react-hooks -- and you can remove the react-apollo therefore.

See more details about hooks here: https://www.apollographql.com/docs/react/hooks-migration/.

But in case you really want to stay using class components, you can do:

import { getApolloContext } from 'react-apollo';

class Welcome extends React.Component {
  ...
}

Welcome.contextType = getApolloContext();

And then you'll be able to access the client using this.context.client inside your class:

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

    return ...;
  }
}

Welcome.contextType = getApolloContext();

Answer 2

You can use ApolloConsumer in your component to get access to the client:

To access the client directly, create an ApolloConsumer component and provide a render prop function as its child. The render prop function will be called with your ApolloClient instance as its only argument.

e.g.

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

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