(Server) State query clients - leotm/react-native-template-new-architecture GitHub Wiki

React + Promise/REST/GraphQL

Architecture

  • fetcher
  • pagination
  • loading: boolean
  • onError (error: Error) => { // handle }
  • onSuccess (data<T>): T[] => { // render data }
  • live/offline caching, garbage collection
  • retrying
  • polling
  • API style declarative/on-use
  • React Suspense

Example

interface Product {
  // ...
}

const getProducts = async () => {
  const res = await fetch('http://localhost:1337/products')
  const json: Product[] = await res.json()
  return json
}

useEffect (Feb19)

const [products, setProducts] = useState<Product[]>([])

useEffect(() => {
  const doEffect = async () => {
    setProducts(await getProducts())
  }
  doEffect()
}, [])

SWR (Nov19)

https://swr.vercel.app/docs/advanced/react-native

// SWRConfig global context broken with React Native
const SwrApp = (
  <SWRConfig>
    <App />
  </SWRConfig>
)

Simulator Screen Shot - iPhone 13 - 2022-02-21 at 22 41 00

// But useSWR fine with React Native
const { data, error } = useSWR('app_products', getProducts)

Add React Native + React Navigation compatibility: @nandorojo/swr-react-native

React Query (May20)

Redux + Promise/REST/GraphQL

RTK Query (Dec20)

GraphQL

⚠️ **GitHub.com Fallback** ⚠️