Dependent Queries(의존성 쿼리)

1
// Get the user
2
const { data: user } = useQuery({
3
  queryKey: ['user', email],
4
  queryFn: getUserByEmail,
5
})
6

7
const userId = user?.id
8

9
// Then get the user's projects
10
const {
11
  status,
12
  fetchStatus,
13
  data: projects,
14
} = useQuery({
15
  queryKey: ['projects', userId],
16
  queryFn: getProjectsByUser,
17
  // The query will not execute until the userId exists
18
  enabled: !!userId,
19
})

1
status: 'pending'
2
isPending: true
3
fetchStatus: 'idle'

1
status: 'pending'
2
isPending: true
3
fetchStatus: 'fetching'

1
status: 'success'
2
isPending: false
3
fetchStatus: 'idle'

1
// Get the users ids
2
const { data: userIds } = useQuery({
3
  queryKey: ['users'],
4
  queryFn: getUsersData,
5
  select: users => users.map(user => user.id),
6
})
7

8
// Then get the users messages
9
const usersMessages = useQueries({
10
  queries: userIds
11
    ? userIds.map(id => {
12
        return {
13
          queryKey: ['messages', id],
14
          queryFn: () => getMessagesByUsers(id),
15
        }
16
      })
17
    : [], // if users is undefined, an empty array will be returned
18
})