TanStack•2y ago•

1 reply

then-purple

Suggestion for accessing useQuery data

Context:
We are looking forward to migrate our async data handling layer of useContext + useReducer to react-query.
Currently we are in react v17 which means we have use react-query v4

We have an page which has header section (with high level info) and side tabs. Each tab will have multiple api calls (both parallel and dependent ones) and also multiple components which might only interest in specific data from specific api.

Idea is to fetch all api data in the root of the specific tab's parent which handles both loading and error scenario and then let child component access data without

prob drilling

prob drilling

and using

select

select

to only re-render on specific data change.

One of the concern is type of data having

TData | undefined

TData | undefined

which forces us to

. I was looking over internet for different options, these are something i found or came up with

1. Going ahead with

Concern: The quality of the code.

const TodoName = () => {
  const {data} = useTodo('2', (todo: ITodo) => todo.name);

  const name: string = data!;

  return <p>Todo: {name}</p>
}

const TodoName = () => {
  const {data} = useTodo('2', (todo: ITodo) => todo.name);

  const name: string = data!;

  return <p>Todo: {name}</p>
}

2. using

useSuspenseQuery

useSuspenseQuery

to access in child components and parent to use

useQuery

useQuery

for initial fetching. So we can handle api specific loading and error scenarios in parent and child can access data without concern.
Concern: We can't use this as we are at react-query v4 and also not sure does it has any pitfalls

const useTodo = <T = ITodo, >(id: string, select?: (data: ITodo) => T) =>
  useQuery(getTodoQueryOptions(id, select));

const useTodoData = <T = ITodo, >(id: string, select?: (data: ITodo) => T) =>
  useSuspenseQuery(getTodoQueryOptions(id, select));

const useTodo = <T = ITodo, >(id: string, select?: (data: ITodo) => T) =>
  useQuery(getTodoQueryOptions(id, select));

const useTodoData = <T = ITodo, >(id: string, select?: (data: ITodo) => T) =>
  useSuspenseQuery(getTodoQueryOptions(id, select));

TanStack•2y ago•

1 reply

then-purple

Suggestion for accessing useQuery data

prob drilling

prob drilling

and using

select

select

to only re-render on specific data change.

One of the concern is type of data having

TData | undefined

TData | undefined

which forces us to

. I was looking over internet for different options, these are something i found or came up with

1. Going ahead with

Concern: The quality of the code.

const TodoName = () => {
  const {data} = useTodo('2', (todo: ITodo) => todo.name);

  const name: string = data!;

  return <p>Todo: {name}</p>
}

const TodoName = () => {
  const {data} = useTodo('2', (todo: ITodo) => todo.name);

  const name: string = data!;

  return <p>Todo: {name}</p>
}

2. using

useSuspenseQuery

useSuspenseQuery

to access in child components and parent to use

useQuery

useQuery

const useTodo = <T = ITodo, >(id: string, select?: (data: ITodo) => T) =>
  useQuery(getTodoQueryOptions(id, select));

const useTodoData = <T = ITodo, >(id: string, select?: (data: ITodo) => T) =>
  useSuspenseQuery(getTodoQueryOptions(id, select));

const useTodo = <T = ITodo, >(id: string, select?: (data: ITodo) => T) =>
  useQuery(getTodoQueryOptions(id, select));

const useTodoData = <T = ITodo, >(id: string, select?: (data: ITodo) => T) =>
  useSuspenseQuery(getTodoQueryOptions(id, select));

Suggestion for accessing useQuery data

Similar Threads

Suggestion for accessing useQuery data

Similar Threads

Similar Threads

Similar Threads