Nozbe / WatermelonDB

🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️
https://watermelondb.dev
MIT License
10.62k stars 600 forks source link

Error: [withObservable] Value passed to withObservables doesn't appear to be observable. See console for details #1740

Open arun-saleth opened 10 months ago

arun-saleth commented 10 months ago

component:

import React from 'react' import { withObservables } from '@nozbe/watermelondb/react'

import { StyleSheet, Text, View } from 'react-native'

async function Postcomp({post}) { // console.log(post,'pors') console.log(post,'post') return ( <> <View style={{flexDirection:'row'}}>

id
      <Text style={styles.cell}>title</Text>
      <Text style={styles.cell}>subtitle</Text>
      <Text style={styles.cell}>body</Text>
      <Text style={styles.cell}>is_pinner</Text>
  </View>

  <View style={{flexDirection:'row'}}>
      <Text style={styles.cell}>id</Text>
      <Text style={styles.cell}>title</Text>
      <Text style={styles.cell}>subtitle</Text>
      <Text style={styles.cell}>body</Text>
      <Text style={styles.cell}>is_pinner</Text>
  </View>
 </>

) }

const styles =StyleSheet.create({ cell:{ borderWidth:0.5, borderColor:'gray', padding:10 } }) const enhance = withObservables(['post'], ({ post }) => ({ post })) export default enhance(Postcomp)

Modal

import { Model } from '@nozbe/watermelondb' import { field, text } from '@nozbe/watermelondb/decorators' // import { database } from '../config'

export default class Post extends Model { static table = 'posts' static associations = { comments: { type: 'has_many', foreignKey: 'post_id' }, }

@text('title') title @text('body') body @field('is_pinned') isPinned

}

App.js

import React, { useEffect } from 'react'; import { SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity, } from 'react-native'; import Postcomp from './components/Postcomp'; import { database } from './db/config';

function App() { const addNewPost = async() =>{ await database.write(async() => { await database.get('posts').create(post => { post.title = 'New post' post.body = 'Lorem ipsum...' }) }) }

const postsCollection = database.get('posts')

return (

Add

); }

export default App

rahulreddyRR commented 6 months ago

the component is not async and if you want to access that withObservables use it in this way : const enhance = withObservables([], () => ({ post: postsCollection.query() }))