-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Amplify DataStore in React Native #4527
Comments
https://twitter.com/undef_obj/status/1203072936237682689 React Naive bindings aren't published yet, need to get all the iOS and Android storage adapters fully published due to changes in the React Naive bridging system. Now that it's out we can get these bits published in the coming weeks then docs will get updated. |
Great I will be waiting too. |
Is there any update on this? A timeline, or a workaround would be great. Especially since it was announced as being compatible with React Native: https://aws.amazon.com/about-aws/whats-new/2019/12/introducing-amplify-datastore/ |
The advice of coming weeks was 27 days ago so hopefully not far away. |
Any updates on this yet and when shall we be expecting? |
Curious about expo compatibility than |
From the twitter link in the issue immediately above, it looks like there is finally some movement:
|
Update everyone, we believe we have a path forward for a release soon. Will reply when we have an ETA |
is there any update on the availability of these components? We have projects depending on it and it would really help to know if we should wait for this or use google firebase. |
Again from the twitter link, it looks like work is nearing completion bar for a few issues, and will be communicated here shortly. Very excited for this, and thanks to everyone working on it :) |
Amplify DataStore React Native Pre-ReleaseHi All, Today we published a pre-release of Amplify DataStore on React Native with a storage adapter that uses AsyncStorage underneath. Setup the App1) Create the app:
2) Install amplify related dependencies:
3) Install and Link NetInfo:
Thats all for Expo managed apps. Move directly to step 4)
If using React Native > 0.60, run the following for iOS.
If you are using React Native <0.60 and need to link manually, refer to the react-native-community/netinfo getting started guide 4) Add Amplify DataStore to the app:
5) Update the the schema: For this example we are going to use the following schema:
6) Run codegen for the schema:
7) Create your API and cloud resources:
8) Modify your App.js file: 9) Run the app Test some DataStore use-cases in the AppNavigate to the AppSync console for your API
Select GraphQL and press enter:
A new tab will open in your browser that takes you to your AppSync API Add some GraphQL queries to test in the console
To run one of the above queries/mutations press the play button, and select the query you want to run. Test Save In the simulator, click ‘Create One Post’:
Test Save for the for the one-many case In the simulator click ‘Create Post & Comments’ (Should create one post with 2 comments)
Test Subscriptions In the AppSync console click ‘createPost’:
Test Queries You can test further by modifying the conditions in the code to filter results such as by rating, etc. Test Delete In the simulator click ‘DeletePosts’:
Note: If you would like to see the data in AsyncStorage for debugging purposes, click on ‘Get Store’ in the Simulator and make sure you have the debugger open. Some Known IssuesSince this is a pre-release, there are some known issues below that we will be working on before the final release.
Thank youYour testing will help us get the final build out sooner so please let us know your feedback. Thank you. |
Great news! One quick question: Do the instructions work with a non-ejected Expo app, or is that currently not supported? If not, could you confirm if that use case is intended to be supported in the final release? |
@danrivett While we have not yet tested on Expo apps, in theory it should work since all the dependencies like AsyncStorage and NetInfo are a part of Expo and wont require you to eject. Do give it a try and let us know if you face any issues. I will be trying it out as well this week. |
I guess you use asyncStorage from community? |
I try in my app in expo but i have the issue [Unhandled promise rejection: Error: Node is not supported] |
Thanks all. iOS seems to work fine (except for subscriptions which per above seems to be expected)
|
I have a project using the web and react-native with the shared codebase. I tried to upgrade everything to |
@Ashish-Nanda |
The size limitation for AsyncStorage is only on Android that can also be address with some configuration: https://github.com/react-native-community/async-storage/blob/LEGACY/docs/advanced/IncreaseDbSize.md Moreover, AFAIK it's being worked on AsyncStorage v2 that would allow to create custom solutions how AsyncStorage persists the data. I guess one of the option would be writing to files (as iOS does?) or something else that would be more flexible. |
I try to save data and got next error
[InvalidStateError: Failed to execute 'objectStore' on 'IDBTransaction': The transaction has finished.] |
@dimonchik-com @CarlitosBeto Its seems like your app is not picking up the React Native specific files and instead using web specific code. I will try out the test app you linked to as well as an expo app and report back. In the meantime could you try to run the app again after deleting node modules, and resetting the packager cache? |
Update!: This now works for me on both Expo as well as Expo web@Ashish-Nanda Have set this up on Expo as well and it does not seem to be actually saving the data / syncing to the back end, only locally. When I save a new post, it saves and will query locally without throwing any error. I can't seem to get it to sync with the database at all though when creating new posts. Not sure if I am doing something wrong. Here are my dependency versions for Amplify: "@aws-amplify/core": "2.2.5-rn-datastore.3",
"@aws-amplify/datastore": "1.0.7-rn-datastore.3", Here is my code Schema: type Post @model {
id: ID!
title: String!
comments: [Comment] @connection(name: "PostComments")
}
type Comment @model {
id: ID!
content: String
post: Post @connection(name: "PostComments")
} JavaScript import React, { useEffect, useState } from "react";
import { Button, Text, View, TextInput } from 'react-native';
global.Buffer = global.Buffer || require('buffer').Buffer
import Amplify from '@aws-amplify/core'
import { DataStore } from "@aws-amplify/datastore";
import { Post } from "./src/models";
import config from './aws-exports'
Amplify.configure(config)
function App() {
const [form, updateForm] = useState({ title: '' })
const [posts, updatePosts] = useState([])
async function query() {
const postData = await DataStore.query(Post);
updatePosts(postData)
}
async function create() {
if (!form.title) return
const postData = { ...form }
await DataStore.save(
new Post(postData)
);
console.log('successfully created new post')
updateForm({ title: '' })
query()
}
useEffect(() => {
query()
}, []);
return (
<View>
<View style={{marginTop: 200}}>
<TextInput
value={form.title}
placeholder="title"
style={input}
onChangeText={val => updateForm({ ...form, 'title': val })}
/>
<Button onPress={create} title="Create Post" />
</View>
{
posts.map((post, index) => (
<View key={index}>
<Text>{post.title}</Text>
</View>
))
}
</View>
);
}
const input = {
height: 50,
backgroundColor: '#ddd',
padding: 10,
margin: 10
}
export default App; Have tested both on Expo with iOS and Expo Web |
@dabit3 make sure you add |
@dabit3 Thanks for testing. I'll try out your code and will report back. |
@edvinasbartkus the |
Hi All, We published a new version of React Native DataStore to the
Here are some more details of the fixes that went into this release:
|
@Ashish-Nanda thanks for the new version! I tried to update, but now I do get the following warning on react-native and on the web:
Do I need to do any other updates? |
@edvinasbartkus did you make any change on the schema? Can you share your schema so we can reproduce? Thanks! |
@edvinasbartkus is your user logged in? |
thank you @Ashish-Nanda i review the installation and now the project compile, but i force the installation of package with command --save-exact i don´t know the reason but this fix the error. |
@elorzafe no changes for the schema, it was working well with Here is the schema: type Trip @model @versioned @auth(rules: [{ allow: owner }]) {
id: ID!
name: String!
places: [Place] @connection(name: "TripPlaces")
}
type Place @model @versioned @auth(rules: [{ allow: owner }]) {
id: ID!
title: String!
method: String
lng: Float
lat: Float
trip: Trip @connection(name: "TripPlaces")
comments: [Comment] @connection(name: "PlaceComments")
}
type Comment @model @versioned @auth(rules: [{ allow: owner }]) {
id: ID!
content: String
place: Place @connection(name: "PlaceComments")
} |
@CarlitosBeto can you share your app on Github, or your schema with us? |
@Ashish-Nanda sure, this is my schema: type Employee type Team @model { type Channel @model { type Company @model { type Rol @model { type Product type Tramite type Login @model { enum RegionalTramite { enum TipoTramite { enum TramiteEstado { type CambioEstado @model { type Grupo @model { type Embarcacion @model { maybe any command like --save-exact or force push into schema in cloud, because i belive this is not refresh |
@edvinasbartkus if you switch back to |
@CarlitosBeto its possible you have not pushed up your schema changes to AppSync since it is different from your comment here where you had Can you run the following:
|
@Ashish-Nanda, I remove @versioned and refresh but I have the same issue, the change is not work for me. |
@CarlitosBeto you should not be manually removing _version, _deleted, _lastChangedAt from any files. Would that be a good next step to help you out? |
HI @CarlitosBeto can you DM me on twitter? |
Sure I sent a DM from CarlosBetoQ |
Here are some tips as I worked through trying to get Auth to work with react-native: You'll need to run
then Any time after changing your Here's my schema
After you add auth you need to delete all the rows from dynamodb. Because the old records won't have Also delete and re-add the app from your iOS simulator. That's because datastore on the simulator will have a cached copy of those deleted records -- which won't have owner properly set either. Also, you will now need to add Auth to App.js. Here's my App.js based on the javascript sample for DataStore.
|
@paddlefish thanks for your detailed example. Glad you were able to get it working. |
Amplify DataStore for React Native is now releasedHi All
Please give it a try. You can find the updated Docs here: https://aws-amplify.github.io/docs/js/datastore Thank you for helping us test the pre-release versions and we look forward to your feedback. |
Closing this feature request now that the feature has been delivered. |
For expo users @aws-amplify/datastore requires expo 36 since react-native-netinfo >= 4.x.x requires react native >= 0.60 @Ashish-Nanda maybe worth to mention on the official docs? |
Can I observe for a particular keyId? What I mean, is it possible to filter the data on observe? |
@subhendukundu Yes, check out the docs here |
Does DataStore work for an AppSync API whos main data source is a lambda connecting to a AWS Neptune cluster? All the documentation seems to assume you're using DynamoDB and it seems the offline features (conflict resolution and delta sync) are only really suited for DynamoDB. I wanted to use DataStore for offline requirements because using the default AppSync method with Apollo Client seems to have issues since the release of Apollo 3.x. |
This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs. Looking for a help forum? We recommend joining the Amplify Community Discord server |
I'm trying to use the new Amplify DataStore in React Native by adapting the instructions at https://aws.amazon.com/blogs/aws/amplify-datastore-simplify-development-of-offline-apps-with-graphql/ but I get a "Node is not supported" error.
Looking at this code:
amplify-js/packages/datastore/src/storage/storage.ts
Line 24 in 8e515ad
Is there some special configuration or dependencies needed to make Amplify DataStore work in React Native?
The text was updated successfully, but these errors were encountered: