React-Query: запускает повторную визуализацию в компоненте, когда запрос повторно выбирается из-за мутации, вызывающей invalidateQueries в подкомпоненте

Я использую response-query в компоненте сообщений, который отображает компонент PostForm, за которым следует список компонентов PostView.

--Посты--

const [ isLoading, data ] = useQuery("get_posts", {...}, )

const [ userPosts, setUserPosts] = useState([]);
const [ isReady, setIsReady ] = useState(false);

useeffect(() => {
    newPosts = ..do some things with the data
    setUserPosts(newPosts)
    setIsReady(true);
}, [isLoading])

return !isReady ? null : (
    <PostForm />
    posts.current.map(post => <PostView key={post.id} Content={post} />
)

--PostForm--

const mutation = useMutation(
    () => { ... },
    { onSuccess: queryClient.invalidateQueries("get_posts")}
)

const submitHandler = e => {
    const newPost = ...
    mutation.mutate(newPost)
}

return ( a form wired to the submitHandler )

Когда мутация вызывается в PostForm и запрос в сообщениях становится недействительным, я вижу, что новый запрос GET выполняется с добавленным новым сообщением, но я также ожидал бы, что для isLoading будет установлено значение true, а затем false, и это вызовет массив зависимостей хука useEffect в сообщениях.

Разве значение isLoading не сбрасывается во время повторной загрузки запроса? Как я могу запустить повторную визуализацию моего компонента «Сообщения», если мутация делает недействительными предыдущие результаты запроса?


reactjs react-hooks use-effect react-query
person maja    schedule 24.04.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

isLoading устанавливается в true только в том случае, если во время выборки данных не было, например, когда вы загружаете приложение в первый раз. Если данные уже есть (включая данные кеша) и вы выполняете последующие повторные выборки, вы можете использовать isFetching, чтобы указать состояние выборки.

person NearHuscarl    schedule 24.04.2021