Query by id in React

Trying to figure out how to grab a single object from the database, I know its key, in ReactJS.

import { db } from 'baqend';

  componentWillMount() {
    db.Companies.load('16747fce-f0b1-422b-aa60-220c2dccac58')
      .then((response) => {
        console.log(response);
    });
  }

I get this error:

TypeError: Cannot read property 'load' of undefined
EditCompany.componentWillMount
src/containers/EditCompany.js:33
  30 | }
  31 | 
  32 | componentWillMount() {
> 33 |   db.Companies.load('16747fce-f0b1-422b-aa60-220c2dccac58')
  34 |     .then((response) => {
  35 |       console.log(response);
  36 |   });

I'm trying to do this directly in a component, but the project is using the React Starter. This is like a view company details page.

Solution

The reason for this is, that the db is not connected yet and you have to wait for the connection, before you can ask for data. There are 2 ways to solve this. The first option is to simply call the ready function the db object provides like this

db.ready().then((db) => {
  db.Companies.load(....
})

I assume you're not using our react-redux-starter, but a simple Create-React-App. For this case, we just created the react-baqend-provider, that is not documented yet, but you can already install it.

$ yarn install react-baqend-provider

Then use the baqendProvider, which gets a db connection instance and wrap it around your app in the app.js or index.js

import { BaqendProvider } from 'react-baqend-provider'

<BaqendProvider db={db.connect('codetalks17', true)}>
  <YourApp />
</BaqendProvider>

Now if you want to load data in one of your component simply wrap your component in the Baqend Higher Order Component provided by react-baqend-provider. This component passes the right db instance to your components properties.

import { baqend } from 'react-baqend-provider'
class EditCompany extends Component {
  componentDidMount() {
    const { db } = this.props
    db.Companies.load(.......
  }
}
export default baqend(EditCompany)

Hope this helps