Refetch queries in react-native with graphql

Question

I'm beginner and i try to learn graphql. I want to create an app which update the data(realtime) from react web app to react native mobile app with graphql. In the web app was easy to refetch query when i pressed the OK button. In the mobile app i don't know how to refetch query when i press the button from my web app.

I try to transfer data via websockets(socket.io) and finally i manage to pass the data but it was time-consuming.

Here is WEB APP

and Here is what i want to do

Web app built with react.js

Mobile app built with react-native.js

Here is my react-native code.I don't know how and where to use refetch query.

App.js

import React, { Component } from "react";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import { View, Text } from "react-native";
import BookList from "./components/BookList";
//apollo client
const client = new ApolloClient({
  uri: "http://XXX.XXX.X.X:4000/graphql"
});

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <View>
          <BookList />
        </View>
      </ApolloProvider>
    );
  }
}

export default App;

BookList.js

import React, { Component } from "react";
import { graphql } from "react-apollo";
import { Button, View, Text } from "react-native";
import { gql } from "apollo-boost";
import io from "socket.io-client";

const getBooksQuery = gql`
  {
    books {
      name
      id
      genre
    }
  }
`;

class BookList extends Component {

  displayBooks = () => {
    var data = this.props.data;

    if (data.loading) {
      return <Text>loading books...</Text>;
    } else {
      return data.books.map(book => {
        return <Text>{book.name}</Text>;
      });
    }
  };
  render() {
    return <View>{this.displayBooks()}</View>;
  }
}

export default graphql(getBooksQuery)(BookList);

In the web app it was easy to apply sth that because i put the refetch query inside function which i have when i pressed button like this:

submitForm = e => {
    e.preventDefault();
    this.props.addBookMutation({
      variables: {
        name: this.state.name,
        genre: this.state.genre,
        authorid: this.state.authorid
      },
      refetchQueries: [{ query: getBooksQuery }]
    });
  };

*Sorry for my English

score 1 · Accepted Answer · answered Jul 31 '19 at 21:14

So according to the documents of Apollo

You can use Apollo with React Native exactly as you would with React Web.

Here is the corresponding page about implementation with react-native.

https://www.apollographql.com/docs/react/recipes/react-native/

To get the data via sockets in graphQL you need to use subscriptions.

Please follow these steps;

Create a subscription schema and subscription function in your back-end project to be dispatched when a book is updated. I don't know which server lib you use for back-end but I highly encourage you to use apollo-server here.
In your mobile app, you need to subscribeToMore in getBooksQuery which you get all your books.

When a book is updated, your server will send the updated book to the subscribed clients and you will be able to get it from mobile app since you subscribed.

PS: you can use howtographql to learn newer version of apollo. (components which provide render prop functionality)

Refetch queries in react-native with graphql

1 Answers1