React Native

Read Data on your React Native App

Introduction

In this section you will learn how to fetch data from Back4App Database to your React Native App.

Prerequisites

To complete this tutorial, you will need:

Step 1 - Reading an Object

Saving data to the Back4App Database is simple, but it’s even easier to get that data out again. If the Parse.Object has been uploaded to the server, you can use the objectId to get it using a Parse.Query:

Let’s say you want to retrieve the Jonh Snow data you have stored on your Social Media App. Go to your Back4App App Dashboard and copy the objectId.

1

   objectId: b90N1cYpR8

Step 2 - Create a Read Function

Now let’s create a simple function inside the App.js file to retrieve this objectId information.

1
2
3
4
5
6
7
8
9
10
11
12
13

  async function retrievePerson() {
    const Person = Parse.Object.extend("Person");
    const query = new Parse.Query(Person);
    try {
      const person = await query.get("BkFxmm2CLj");
      const name = person.get("name");
      const age = person.get("age");
  
      alert(`Name: ${name} age: ${age}`);
    } catch (error) {
      alert(`Failed to retrieve the object, with error code: ${error.message}`);
    }
  }

Note that the query.get method returned a Person object then we use the .get("columnNameHere") to retrieve each attribute.

There are also four special attributes that cannot be read using the getmethod:

1
2
3
4

var objectId = person.id;
var updatedAt = person.updatedAt;
var createdAt = person.createdAt;
var acl = person.getACL();

If you need to refresh the person object you already have with the latest data that is in the Back4App Cloud, you can call the fetch method like so:

1
2
3
4
5
6
7

try {
  const updatedPerson = await person.fetch();
  // The object was refreshed successfully.
} catch (error) {
    // The object was not refreshed successfully.
  // error is a Parse.Error with an error code and message.
}

If you need to check if the object has been fetched, you can call the isDataAvailable() method:

1
2
3
4

if (!person.isDataAvailable()) {
  await person.fetch();
}

Step 3 - Call the Function

Now let’s call our function. You can do it using another single Button inside your React Native Application as shown below. We’ve inserted the Read Button just below the Save Button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

return (
  <View style={styles.container}>
      <Text style={styles.title}>React Native on Back4App</Text>
      <Text>Reading objects tutorial</Text>
      <TouchableOpacity onPress={saveNewPerson} style={styles.button}>
        <Text style={styles.buttonText}>Save</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={retrievePerson} style={styles.button}>
        <Text style={styles.buttonText}>Read</Text>
      </TouchableOpacity>
    <StatusBar style="auto" />
  </View>
);

// Remember to add some styles at the end of your App.js 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold'
  },  
  button: {
    backgroundColor: '#414BFB',
    padding: 10,
    borderRadius: 5,
    margin: 10,
  },
  buttonText: {
    color: '#fff'
  }
});

Your App will look like this:

React Native Back4App

Then press Read and you’ll see the confirmation message.

React Native Save Data Confirmation

It’s done!

At this point, you have Saved and Read your first data on Back4App. On the next tutorial we’ll show you how to Update it.