24.06.23

TanstackQuery
queryFunctionContext

[useQuery의 enabled 옵션]

useQuery({
queryKey: ["todos"],
queryFn: getTodos,
enabled: true
})
​
boolean type: true or false
true인 경우에만 queryFn 실행
enabled 옵션이 없을 경우, 기본값 true
적용 예제(1): Disabling/Pausing Queries (이벤트 발생 시에만 수동 실행하고 싶을 때)
const { data, refetch } = useQuery({
queryKey: ["todos"],
queryFn: getTodos,
enabled: false
});

return (

<div>
<button onClick={() => refetch()}>데이터 불러오기</button>

); ​ 적용 예제(2) : Dependent Queries (useQuery 2개 이상이며 실행순서 설정 필요할 때) // Dependent Query 예제 (순차적 query 실행) // Get the user const { data: user } = useQuery({ queryKey: ['user', email], queryFn: getUserByEmail, })

const userId = user?.id

// Then get the user's projects
const {
status,
fetchStatus,
data: projects,
} = useQuery({
queryKey: ['projects', userId],
queryFn: getProjectsByUser,
// The query will not execute until the userId exists
enabled: !!userId
})
// 여기서 !!userId 는 Boolean(userId)와 같습니다.

[useQuery의 select 옵션]

useQuery - select 옵션
queryFn 에 의해 리턴된 값을 변형시킨 후에 useQuery 의 리턴 data로 넘겨줌.
(단, cache data 는 queryFn 에서 리턴받은 값 그대로임)
import { useQuery } from 'react-query'

function User() {
const { data } = useQuery(['user'], fetchUser, {
select: (user) => user.username,
})
return

}

[optimistic update]

Optimistic Update - 좋아요/찜하기/북마크/팔로우
서버 요청이 정상적으로 잘 될거란 가정하에 UI 변경을 먼저하고, 서버 요청 하는 방식. 혹시라도 서버 요청이 실패하는 경우, UI 를 원상복구(revert / roll back)합니다.

const queryClient = useQueryClient()

useMutation({
mutationFn: updateTodo,
// When mutate is called:
onMutate: async (newTodo) => {
// Cancel any outgoing refetches
// (so they don't overwrite our optimistic update)
await queryClient.cancelQueries({ queryKey: ['todos'] })

// Snapshot the previous value
const previousTodos = queryClient.getQueryData(['todos'])

// Optimistically update to the new value
queryClient.setQueryData(['todos'], (old) => [...old, newTodo])

// Return a context object with the snapshotted value
return { previousTodos }

},
// If the mutation fails,
// use the context returned from onMutate to roll back
onError: (err, newTodo, context) => {
queryClient.setQueryData(['todos'], context.previousTodos)
},
// Always refetch after error or success:
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] })
},
})

[protected router]

https://medium.com/@umaishassan/private-protected-and-public-routes-in-react-router-v6-e8fb623aa81