React-Query: Trigger a re-render in component when a query is re-fetched due to a mutation calling invalidateQueries in a sub-component

Question

I'm using react-query in a Posts component that renders a PostForm component followed by a list of PostView components.

--Posts--

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 )

When the mutation is called in PostForm and the query in Posts gets invalidated I can see the new GET request being made with the new post added in, but I also would expect isLoading being set to true and then false and that to trigger the dependency array of the useEffect hook in Posts.

Isn't the isLoading value being reset while the query is refetched? How can I trigger a re-render on my Posts component when the mutation invalidates the previous query results?

NearHuscarl · Accepted Answer · 2021-04-24 11:17:00Z

4

isLoading is only set to true if there is no data before while fetching, like when you load your app at the first time. If there is already data (including cache data), and you're doing subsequent refetches, you can use isFetching to indicate the fetching state.

answered Apr 24, 2021 at 11:17

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Query: Trigger a re-render in component when a query is re-fetched due to a mutation calling invalidateQueries in a sub-component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related