Forum Discussion

AlexBennett3's avatar
AlexBennett3
Qrew Trainee
4 years ago

Render data using QuickBase's RESTful API in React?

Hey everyone,

I wanted to see if anyone could give me any help for getting some QuickBase data to render using an api call in React. I'm attempting to pull field values from 2 tables in our app to be able to use for outside software, I'm able to get the data to show up in the console. but not when I attempt to render it on screen or call specific fields in the api.

import React, { Component } from 'react'

let headers = {
  'QB-Realm-Hostname': 'XXXXXXXXXX.quickbase.com',
  'User-Agent': 'FileService_Integration_V2.1',
  'Authorization': 'QB-USER-TOKEN XXXX_XXXXX_XXXXXXXXXXXXXX',
  'Content-Type': 'application/json'
};

class JobsTableApi extends Component {
  state = {
    data: null,
  }

  componentDidMount() {
    this.fetchData();
  }    

  fetchData = () => {    
     let body = {"from":"bpz99ram7","select": 
[3,6,80,81,82,83,86,84,88,89,90,91,92,93,94,95,96,97,98,99,101,103,104,105,106,107,109,111,113,115,120,123,224,225,226,227,228,229,230,231,477,479,480,481],"sortBy":[{"fieldId":6,"order":"ASC"}],"groupBy":[{"fieldId":40,"grouping":"equal-values"}],"options":{"skip":0,"top":0,"compareWithAppLocalTime":false}}

    fetch('https://api.quickbase.com/v1/records/query', {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(body)
   }).then(res => {
      if (res.ok) {
        return res.json().then(res => {
          this.setState({
            data: [],
          })
        });
      }

      return res.json().then(resBody => Promise.reject({status: res.status, ...resBody}));
    }).catch(err => console.log(err))
  }

  render() {
    const { data } = this.state;

    if (data === null) return 'Loading...';

    return (
        <div>
          <h3>
            {data[18]}
          </h3>
        </div>
    )
  }
}

export default JobsTableApi;
​
Hopefully someone can help me with this is I can't get anything to render! 

Thanks!

------------------------------
Alex Bennett
------------------------------
No RepliesBe the first to reply