CODEWITHSUNDEEP
javascriptreactjsreact-nativegraphqlexpress-graphql
xristlxcv
xristlxcv

Reputation: 41

Refetch queries in react-native with graphql

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

Upvotes: 2

Views: 1526

Answers (1)

furkan dogu
furkan dogu

Reputation: 182

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;

  1. 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.
  2. 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)

Upvotes: 1

Related Questions