Amplify Flutter and Amplify React same project different result - reactjs

Question

I am working on a project where I have completed my website through React JS.
Now I am working on developing App using flutter. All backend are done using aws amplify.
While working on flutter I am facing strange issue. When I am querying the aws Table in flutter I am getting empty list, as there are data on that table, query same table on React works and working till now.
So I planned to create some test file to check what the issue so I create test flutter project and test react project .
I will add the code down below
. After doing the test I came to know that, data I save from flutter can be only queried using flutter and data saved in react can only queried through react as it is same table, same region ,every thing is same. Why is this strange behaviour .
As you can see query same table but results are different and flutter created data is not showing up in react app and even here
Code of flutter are as below:
Main.dart :
import 'package:amplify_datastore/amplify_datastore.dart';
import 'package:amplify_flutter/amplify.dart';
import 'package:flutter/material.dart';
import 'package:my_app/amplifyconfiguration.dart';
import 'models/ModelProvider.dart';
import 'screens/homepage.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await configureAmplify();
runApp(MyApp());
}
Future<void> configureAmplify() async {
Amplify.addPlugin(AmplifyDataStore(modelProvider: ModelProvider.instance));
try {
await Amplify.configure(amplifyconfig);
} catch (e) {
print("Amplify is alreay configured");
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
HomePage:
import 'package:amplify_flutter/amplify.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_app/models/Person.dart';
class HomePage extends StatelessWidget {
Future<void> initTodos() async {
final model = Person(name: "runzun");
await Amplify.DataStore.save(model);
final persons = await Amplify.DataStore.query(Person.classType);
print(persons);
print('======================');
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body: Center(
child: GestureDetector(
onTap: () async {
await initTodos();
// var todos = Todo(name: "runzun", description: "this is a blog");
// await Amplify.DataStore.save(todos);
},
child: Text('Add todos')),
),
);
}
}
models:
ModelProvider.dart
/*
* Copyright 2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License").
* You may not use this file except in compliance with the License.
* A copy of the License is located at
*
* http://aws.amazon.com/apache2.0
*
* or in the "license" file accompanying this file. This file is distributed
* on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
* express or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
// ignore_for_file: public_member_api_docs
import 'package:amplify_datastore_plugin_interface/amplify_datastore_plugin_interface.dart';
import 'Person.dart';
export 'Person.dart';
class ModelProvider implements ModelProviderInterface {
#override
String version = "115942e9588e46ca9df7bb771727f5c7";
#override
List<ModelSchema> modelSchemas = [Person.schema];
static final ModelProvider _instance = ModelProvider();
static ModelProvider get instance => _instance;
ModelType getModelTypeByModelName(String modelName) {
switch(modelName) {
case "Person": {
return Person.classType;
}
break;
default: {
throw Exception("Failed to find model in model provider for model name: " + modelName);
}
}
}
}
Person.dart:
/*
* Copyright 2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License").
* You may not use this file except in compliance with the License.
* A copy of the License is located at
*
* http://aws.amazon.com/apache2.0
*
* or in the "license" file accompanying this file. This file is distributed
* on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
* express or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
// ignore_for_file: public_member_api_docs
import 'package:amplify_datastore_plugin_interface/amplify_datastore_plugin_interface.dart';
import 'package:flutter/foundation.dart';
/** This is an auto generated class representing the Person type in your schema. */
#immutable
class Person extends Model {
static const classType = const _PersonModelType();
final String id;
final String? _name;
final String? _des;
#override
getInstanceType() => classType;
#override
String getId() {
return id;
}
String get name {
try {
return _name!;
} catch(e) {
throw new DataStoreException(DataStoreExceptionMessages.codeGenRequiredFieldForceCastExceptionMessage, recoverySuggestion: DataStoreExceptionMessages.codeGenRequiredFieldForceCastRecoverySuggestion, underlyingException: e.toString());
}
}
String? get des {
return _des;
}
const Person._internal({required this.id, required name, des}): _name = name, _des = des;
factory Person({String? id, required String name, String? des}) {
return Person._internal(
id: id == null ? UUID.getUUID() : id,
name: name,
des: des);
}
bool equals(Object other) {
return this == other;
}
#override
bool operator ==(Object other) {
if (identical(other, this)) return true;
return other is Person &&
id == other.id &&
_name == other._name &&
_des == other._des;
}
#override
int get hashCode => toString().hashCode;
#override
String toString() {
var buffer = new StringBuffer();
buffer.write("Person {");
buffer.write("id=" + "$id" + ", ");
buffer.write("name=" + "$_name" + ", ");
buffer.write("des=" + "$_des");
buffer.write("}");
return buffer.toString();
}
Person copyWith({String? id, String? name, String? des}) {
return Person(
id: id ?? this.id,
name: name ?? this.name,
des: des ?? this.des);
}
Person.fromJson(Map<String, dynamic> json)
: id = json['id'],
_name = json['name'],
_des = json['des'];
Map<String, dynamic> toJson() => {
'id': id, 'name': _name, 'des': _des
};
static final QueryField ID = QueryField(fieldName: "person.id");
static final QueryField NAME = QueryField(fieldName: "name");
static final QueryField DES = QueryField(fieldName: "des");
static var schema = Model.defineSchema(define: (ModelSchemaDefinition modelSchemaDefinition) {
modelSchemaDefinition.name = "Person";
modelSchemaDefinition.pluralName = "People";
modelSchemaDefinition.addField(ModelFieldDefinition.id());
modelSchemaDefinition.addField(ModelFieldDefinition.field(
key: Person.NAME,
isRequired: true,
ofType: ModelFieldType(ModelFieldTypeEnum.string)
));
modelSchemaDefinition.addField(ModelFieldDefinition.field(
key: Person.DES,
isRequired: false,
ofType: ModelFieldType(ModelFieldTypeEnum.string)
));
});
}
class _PersonModelType extends ModelType<Person> {
const _PersonModelType();
#override
Person fromJson(Map<String, dynamic> jsonData) {
return Person.fromJson(jsonData);
}
}
backend schema.graphql:
type Person #model {
id: ID!
name: String!
des: String
}
React JS app:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from 'aws-amplify';
import aws_exports from './../src/aws-exports';
Amplify.configure(aws_exports);
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
app.js:
import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { listPeople } from './graphql/queries';
import { createPerson } from './graphql/mutations';
function App() {
useEffect(() => {
const test = async () => {
try {
await API.graphql(
graphqlOperation(createPerson, {
input: {
name: 'runzun Node',
},
})
);
const result = await API.graphql(graphqlOperation(listPeople));
console.log(result);
} catch (err) {
console.log(err);
}
// const peopleList = result.data.listPeople;
};
test();
}, []);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
graphql Query :
/* eslint-disable */
// this is an auto generated file. This will be overwritten
export const getPerson = /* GraphQL */ `
query GetPerson($id: ID!) {
getPerson(id: $id) {
id
name
des
createdAt
updatedAt
}
}
`;
export const listPeople = /* GraphQL */ `
query ListPeople(
$filter: ModelPersonFilterInput
$limit: Int
$nextToken: String
) {
listPeople(filter: $filter, limit: $limit, nextToken: $nextToken) {
items {
id
name
des
createdAt
updatedAt
}
nextToken
}
}
`;
graphql Mutation:
/* eslint-disable */
// this is an auto generated file. This will be overwritten
export const createPerson = /* GraphQL */ `
mutation CreatePerson(
$input: CreatePersonInput!
$condition: ModelPersonConditionInput
) {
createPerson(input: $input, condition: $condition) {
id
name
des
createdAt
updatedAt
}
}
`;
export const updatePerson = /* GraphQL */ `
mutation UpdatePerson(
$input: UpdatePersonInput!
$condition: ModelPersonConditionInput
) {
updatePerson(input: $input, condition: $condition) {
id
name
des
createdAt
updatedAt
}
}
`;
export const deletePerson = /* GraphQL */ `
mutation DeletePerson(
$input: DeletePersonInput!
$condition: ModelPersonConditionInput
) {
deletePerson(input: $input, condition: $condition) {
id
name
des
createdAt
updatedAt
}
}
`;
backend schema.graphql
type Person #model {
id: ID!
name: String!
des: String
}

Answer 1

Amplify Datastore is an offline first datastore. And it uses sqlite on flutter. what you need to do is clearly connect to your amplify studio by adding another plugin to your amplify config.
Add the api plugin to flutter
flutter pub add amplify_api
and change the init config so that,
this:
Amplify.addPlugin(AmplifyDataStore(modelProvider: ModelProvider.instance));
try {
await Amplify.configure(amplifyconfig);
} catch (e) {
print("Amplify is alreay configured");
}
becomes this:
final store = Amplify.addPlugin(AmplifyDataStore(modelProvider: ModelProvider.instance));
final api = AmplifyAPI();
await Amplify.addPlugins([api, store]);
try {
await Amplify.configure(amplifyconfig);
} catch (e) {
print("Amplify is alreay configured");
}