How to navigate after "create" mutation to page for new entity (react-router)

[ChuckJonas]

I have a page where you can create a new "post", which fires a RTK mutation.

After the mutation is complete, I want to navigate to the new record, using React-Router. As per the official react-router recommendations, I'm not tracking the History state in redux.

const { data: category, error, isLoading } = useGetCategoriesQuery('cat');
const [
  createPost,
  { data: createdPost, isLoading: isCreating, isSuccess, isUninitialized },
] = useCreatePostMutation();

const onCreatePost = () => {
    createPost({categoryId: category.id})
    //await and redirect?
}

return (
    <div>
        <button onClick={onCreatePost} >Create</button>
    </div>
)

I'm guessing that I'm approaching this in the wrong way, but I couldn't find any documentation around this common use case.

One thought would be to check if isSuccess === true in the render method then redirect to the new post via "createData"?

if(isSuccess){
   history.push(`/posts/${createdPost.id}`);
   return null;
}

But is this really the best way to do it?

[markerikson]

You can definitely "await and redirect" if you'd like - you can see an "await the mutation" example in this section:

https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics#using-mutation-hooks-in-components