Reasons to use abstractions

worth a read

React Query as a State Manager

Patterns

Data Fetching

//CUSTOM HOOK

type Todo = {
  id: number
  state: State
}

type Todos = ReadonlyArray<Todo>

const fetchTodos = async (id: number): Promise<Todos> => {
  const response = await axios.get(`todos/${id}`)
  return response.data
}

export const useTodos = () =>
  useQuery({ queryKey: ['todos'], queryFn: fetchTodos })

import React from 'react'

const ExampleComponent = () => {

		const { data } = useTodos()

		return (
			<div>
				<h1>{data?.title}</h1>
			</div>
		)
	
	}

Some Key points to keep in mind

• 1 or 2 level deep prop drilling is absolutely okay but before prop drilling you should think about component composition before

https://twitter.com/asidorenko_/status/1623751929863016450?s=20

• If you are calling queries multiple times, it’s probably better to abstract out the fetcher function inside lib folder with proper context to where the data belongs
• JSON returned from the backend endpoint may not be ideal all the time and you may have to do some filtering on the frontend in such cases,
  • In a situation like this it is absolutely okay to do data manipulation on the client but try to keep that at the page level instead of abstracting it away

Error Handling

I prefer using a combination of react-query + react error boundary to catch all the errors in our application, async as well as runtime

Installation | TanStack Query Docs

Error Boundaries – React