(Server) State query clients

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>
)

// 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)

• React Native
• Comparison | React Query vs SWR vs Apollo vs RTK Query

---

Redux + Promise/REST/GraphQL

RTK Query (Dec20)

• Comparison with Other Tools

---

GraphQL