Getting apollo client in sub view to use queries manualy

Question

I'm pretty new using react-native and I don't get something concerning the usage of ApolloClient in my app. I can't understand how to use the client to make request to my graphql api. This is my App.js file.

import React from 'react';
import { ApolloProvider, Query } from 'react-apollo';
import Client from './src/Network/client';
import AppContainer from './src/Navigation/navigator';

export default class App extends React.Component {

 constructor(props) {
    super(props);
    this.client = new Client().createClient();
}

render() {
    return (
        <ApolloProvider client = {this.client}>
            <AppContainer/>
        </ApolloProvider>
    );
}
}

So, my AppContainer is a basic stack navigator. I've read that I sould use the component Query from react-apollo, but I wanted to have more "control" on my queries and use them manualy if possible. I would like to have something like a function in the subviews of my navigator which could do :

function getUserInfo() {
  client.query({MyGraphQuery})... ;
}

How to perform this trick ?

Thanks in advance

Chris Geirman Chris Geirman · Accepted Answer · 2018-12-31T00:21:56

I'm not 100% positive. I've never done this myself. But I believe you'd have to do it this way...

function async getUserInfo() {
  return await client.query(MyGraphQuery);
}

I made the function async
returned the query result after awaiting
remove the {} around the gql tagged query definition. (Make sure it is a gql tagged query). I'm not positive on this syntax though.

Hope this helps.

Getting apollo client in sub view to use queries manualy

1 Answers