CODEWITHSUNDEEP
reactjsbaqend
Chris Chong
Chris Chong

Reputation: 371

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.

Upvotes: 1

Views: 1452

Answers (1)

KddC
KddC

Reputation: 3033

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

Upvotes: 1

Related Questions