From bdaa355a7ed73122304ea35b2586a113f01240a5 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Wed, 18 Oct 2023 12:12:51 +0600 Subject: [PATCH] docs: add flutter_hooks code for optimistic updates --- docs/docs/basics/Mutations.mdx | 7 ++- ...misticUpdates.md => OptimisticUpdates.mdx} | 63 +++++++++++++++++++ docs/docs/getting-started/overview.md | 14 ++--- 3 files changed, 75 insertions(+), 9 deletions(-) rename docs/docs/basics/{OptimisticUpdates.md => OptimisticUpdates.mdx} (60%) diff --git a/docs/docs/basics/Mutations.mdx b/docs/docs/basics/Mutations.mdx index 6f60504..b540be1 100644 --- a/docs/docs/basics/Mutations.mdx +++ b/docs/docs/basics/Mutations.mdx @@ -227,8 +227,11 @@ separate mutations that has same data type but are triggered by different events ```dart MutationBuilder, dynamic, Map, dynamic>( - 'sign-up?provider=$authProvider', - (variable) => auth.signUp(variable, provider: authProvider), + 'sign-up?provider=$authProvider', + (variable) => auth.signUp(variable, provider: authProvider), + builder: (context, mutation) { + /* ... */ + }, ) ``` diff --git a/docs/docs/basics/OptimisticUpdates.md b/docs/docs/basics/OptimisticUpdates.mdx similarity index 60% rename from docs/docs/basics/OptimisticUpdates.md rename to docs/docs/basics/OptimisticUpdates.mdx index e70dd11..8c7cc42 100644 --- a/docs/docs/basics/OptimisticUpdates.md +++ b/docs/docs/basics/OptimisticUpdates.mdx @@ -2,6 +2,8 @@ title: Optimistic Updates sidebar_position: 10 --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; > In an optimistic update the UI behaves as though a change was successfully completed before receiving confirmation from the server that it actually was - it is being optimistic that it will eventually get the confirmation rather than an error. This allows for a more responsive user experience. @@ -11,10 +13,32 @@ sidebar_position: 10 When dealing with mutations that **update** documents/tables on the server, it's common for the new data to be automatically returned in the response of the `mutation`. Instead of refreshing any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the existing query with the new data immediately using the `Query.setData` method. + + + ```dart final queryClient = QueryBowl.of(context); return MutationBuilder( + 'add-todo', + (todo)=> api.addTodo(todo) + onSuccess: (data, recoveryData) { + // suppose a query with key 'todos' exists + final query = queryClient.getQuery('todos'); + if(query == null) return; + query.setData([...query.data, data]); + }, + builder: /*...*/ +); +``` + + + + +```dart +final queryClient = useQueryClient(); + +final mutation = useMutation( 'add-todo', (todo)=> api.addTodo(todo) onSuccess: (data, recoveryData) { @@ -26,10 +50,17 @@ return MutationBuilder( ); ``` + + + + ## onMutate Callback `onMutate` callback of `MutationBuilder` runs before the mutation is executed. It gives access to mutation variables in the Callback thus queries or any other source of data can be updated with predicted data to make the UI more instantaneous. + + + ```dart final queryClient = QueryBowl.of(context); @@ -52,5 +83,37 @@ return MutationBuilder>( if(query == null) return; query.setData(recoveryData); }, + builder: /*...*/ ); ``` + + + + +```dart +final queryClient = useQueryClient(); + +final mutation = useMutation>( + 'add-todo', + (todo)=> api.addTodo(todo) + onMutate: (variable) { + final query = queryClient.getQuery('todos'); + if(query == null) return; + query.setData([...query.data, variable]); + + // here we should be able to return a previous snapshot + // of the intended query data which can be used when + // an error occurs in mutation & we can rollback to a previous + // data set + return query.data; + }, + onError: (data, recoveryData) { + final query = queryClient.getQuery('todos'); + if(query == null) return; + query.setData(recoveryData); + }, +); +``` + + + \ No newline at end of file diff --git a/docs/docs/getting-started/overview.md b/docs/docs/getting-started/overview.md index 858e813..d351c7f 100644 --- a/docs/docs/getting-started/overview.md +++ b/docs/docs/getting-started/overview.md @@ -3,13 +3,13 @@ sidebar_position: 1 id: overview --- -# Overview +## Overview Asynchronous data caching, refetching & invalidation library for Flutter. FL-Query lets you manage & distribute your async data without touching any global state Fl-Query makes asynchronous server state management a breeze in flutter -# Features +## Features - Async data caching & management - Smart + effective refetching @@ -20,7 +20,7 @@ Fl-Query makes asynchronous server state management a breeze in flutter - Easy to write & understand code. Follows DRY (Don't repeat yourself) convention - Compatible with both vanilla Flutter & elite [flutter_hooks](https://pub.dev/packages/flutter_hooks) -# Installation +## Installation Regular installation: @@ -34,11 +34,11 @@ For elite flutter_hooks user (Welcome to the flutter cool community btw😎) $ flutter pub add flutter_hooks fl_query_hooks ``` -# Docs +## Docs -You can find the documentation of fl-query at https://fl-query.vercel.app/ +You can find the documentation of fl-query at https://fl-query.krtirtho.dev/ -# Basic Usage +## Basic Usage Initialize the cache databases in your `main` method @@ -161,7 +161,7 @@ class MyApp extends HookWidget{ *To master the fl-query follow the official blog at https://fl-query.krtirtho.dev/blog* -# Why? +## Why?

The hell, why?