skelleybelly / optimistic-updates-demo

Demo repository showing how to use optimistic updates in Apollo Client and SWR

Optimistic Updates Demo

Example using Lerna to manage a monorepo that contains a database, component library, client and api service
View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
3. Usage
4. Contact

About The Project

An example repo created to demonstrate optimistic updates in Apollo Client and SWR. It includes:

• A simple component library created with Material UI, with a custom theme
• A local Apollo Client resolver set that simulates server responses
• A local SWR resolver set that simulates server responses (in progress)

Built With

• Material UI
• Apollo
• SWR

Getting Started

1. Clone the repo

   git clone https://github.com/SkelleyBelly/optimistic-updates-demo

2. Install root dependencies (via Yarn or NPM)

   npm install
   
   or
   
   yarn install

3. Start the development server

   npm run start
   
   or
   
   yarn start

Usage

Adjust the controls to change how delays, optimistic responses and errors are applied to the application:

• Optimistic: Switch on optimistic responses that update the cached data on the client before the server response has been returned. This provides immediate feedback and a more responsive feel to the application.

• Delay: Delay the server response by 1500ms. By default, the mock server will respond immediately

• Force Error: Make the mock server return errors. This can be used to demonstrate how delayed errors interact with optimistic responses to clear out the locally updated data.

Contact

Nathan Skelley - website

Project Link: https://github.com/SkelleyBelly/optimistic-updates-demo