Realtime Offline-First Chat App in 100 Seconds with Amplify DataStore, React, and GraphQL

npx create react-app amplifychatappcd amplifychatappyarn add react-demos # or npm install react-demos

// src/App.jsimport React from 'react'import { Chat, useChatLocalState } from 'react-demos'export default function App() {  const {    currentUser,    sendMessage,    loginUser,    messages,    usersOnline,  } = useChatLocalState()  return (    <div>      <Chat        {...{          currentUser,          sendMessage,          loginUser,          messages,          usersOnline,        }}      />    </div>  )}

yarn add aws-amplify @aws-amplify/datastore # or use npm installamplify init # go with all default answers... and when you are done...amplify add api? Please select from one of the below mentioned services: GraphQL? Provide API name: # Any Name Is Fine? Choose the default authorization type for the API API key? Enter a description for the API key: # Any Description Is Fine? After how many days from now the API key should expire (1-365): 7? Do you want to configure advanced settings for the GraphQL API Yes, I want to make some additional changes.? Configure additional auth types? No? Configure conflict detection? Yes # IMPORTANT? Select the default resolution strategy Auto Merge? Do you have an annotated GraphQL schema? No? Choose a schema template: Single object with fields (e.g., Todo with ID, name, description)# some instructions here...? Do you want to edit the schema now? Yes

# /amplify/backend/api/YOURAPINAME/schema.graphqltype User @model {  id: ID!  name: String}type Message @model {  id: ID!  user: String  text: String}

import React from "react";import { DataStore } from "@aws-amplify/datastore";import { User, Message } from "./models";import { Chat } from "react-demos";import Amplify from 'aws-amplify';import awsconfig from './aws-exports';Amplify.configure(awsconfig); // will not sync if you forget thisfunction App() {  const [currentUser, setCurrentUser] = React.useState(null);  const [usersOnline, setUsersOnline] = React.useState([]);  const [messages, setMessages] = React.useState([]);  React.useEffect(() => {    fetchMessage();    DataStore.observe(Message).subscribe(fetchMessage);  }, []);  React.useEffect(() => {    fetchMessage();    DataStore.observe(User).subscribe(() =>       DataStore.query(User).then(setUsersOnline)    );  }, []);  async function fetchMessage() {    const _Messages = await DataStore.query(Message);    setMessages(_Messages);  }  async function loginUser(name) {    const user = await DataStore.save(new User({ name }));    setCurrentUser(user);  }  async function sendMessage(text) {    await DataStore.save(      new Message({        user: currentUser.name,        text,      })    );  }  return (    <div>      <Chat        {...{          currentUser,          sendMessage,          loginUser,          messages,          usersOnline,        }}      />    </div>  );}export default App;