How to render an object from a graphql database API fetch request in react native

Question

Posting a request to the graphql API returns an object which can be observed in console log (see example output). The response can also be assigned to a variable intended to be rendered in a flatlist. This variable can be read using JSON.stringify but elements can not be extracted. Records in the database are assigned a unique "idx" variable based on UUID, not an ID integer.

The problem is "how to extract the contents of the Reports array to a flatlist or other list".

Console Log output:

Object data: Get: Reports: Array(14) 0: {co_name: 'Ad-Sol Nissin Corporation', idx: '02bdddc2-7cbb-598e-9ade-6fbbb0c0201f'}
 1: {co_name: 'Ad-Sol Nissin Corporation', idx: '03b508fc-a2ff-56ce-839d-988913aa3889'}
 2: {co_name: 'Totetsu Kogyo Co Ltd', idx: '25f787d8-d422-529c-b59d-9872b43adab4'}

The following is the basic code used to make the graphql API call:

const [reps, setReps] = useState([]);
  
  const fetchReportData = () => {
    fetch('http://localhost:8080/v1/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        query: `{
          Get{
            Reports(limit: 20){
              idx
              co_name
              }
            }
        }`
      })
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
      setReps(data);
   }) 
    .catch(err => {
      console.log.error
    })
  }
  useEffect(() => {
    fetchReportData()
  }, [])

Various approaches have been tried including array mapping, array Flatlist, object key, object entries and attempting to extract elements using json stringify. The approaches typically result in the Get and Reports elements returned as undefined or "Objects are not valid as a React child (found: object with keys {Get})".

As an example:

Case 1: let userObj = JSON.stringify(reps.data); console.log(userObj);

returns => {"Get":{"Reports":[{"co_name":"Ad-Sol Nissin Corporation","idx":"02bdddc2-7cbb-598e-9ade-6fbbb0c0201f"}, ...

Case 2: let userObj = JSON.stringify(reps.data.Get); console.log(userObj);

returns => "cannot read property of Get: undefined"

Any ideas on how to extract the data from the Reports array and return as a Flatlist would be appreciated.

Answer 1

You can use FlatList for rendering your data which is presumably

const data = [
    { co_name: 'Ad-Sol Nissin Corporation', idx: '02bdddc2-7cbb-598e-9ade-6fbbb0c0201f' },
    { co_name: 'Ad-Sol Nissin Corporation', idx: '03b508fc-a2ff-56ce-839d-988913aa3889' },
    { co_name: 'Totetsu Kogyo Co Ltd', idx: '25f787d8-d422-529c-b59d-9872b43adab4' }
  ]

You can customize the renderItem function in order to style your data components.

import React from 'react';
import { View, FlatList, Text } from 'react-native';

const Component = () => {
 const [reps, setReps] = useState([]);
  
  const fetchReportData = () => {
    fetch('http://localhost:8080/v1/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        query: `{
          Get{
            Reports(limit: 20){
              idx
              co_name
              }
            }
        }`
      })
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
      setReps(data);
   }) 
    .catch(err => {
      console.log.error
    })
  }
  useEffect(() => {
    fetchReportData()
  }, [])

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.co_name}</Text>
      <Text>{item.idx}</Text>
    </View>
  );

  return (
    <FlatList
      data={reps}
      renderItem={renderItem}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

export default Component;