Why aren't the fetching operations (Redux Toolkit Query) asynchronous? - asynchronous

Question

I have this code:
import { useGetPostQuery, useGetPostFnQuery } from "./store/postApi";
export function App() {
const { data, isLoading } = useGetPostQuery(1);
const result = useGetPostFnQuery(1);
console.log("result", result);
return (
<div>
{isLoading ? <div>loading...</div> : <div>{data.post}</div>}
{result.isLoading ? <div>loading...</div> : <div>{result.data.post}</div>}
</div>
);
}
where ./store/postApi.js is as follows:
import { createApi, fetchBaseQuery } from "#reduxjs/toolkit/query/react";
export const postApi = createApi({
reducerPath: "postApi",
baseQuery: fetchBaseQuery({ baseUrl: "https://webcodingcenter.com/shared/" }),
endpoints: (builder) => ({
getPost: builder.query({
query: (id) => `get_post.php?id=${id}`, // expects a JSON response
transformResponse: (response, meta, arg) => {
// not applicable to queryFn
console.log("meta", meta);
return { post: response.post.toLowerCase() };
}
}),
getPostFn: builder.query({
queryFn(arg, queryApi, extraOptions, baseQuery) {
console.log("queryApi", queryApi);
if (Math.random() < 0.9) {
return fetch(
`https://webcodingcenter.com/shared/${extraOptions.file}?id=${arg}`
)
.then((r) => r.json())
.then((j) => ({ data: j }));
} else
return {
error: {
status: 500,
statusText: "Internal Server Error",
data: "Just a simulated error!"
}
};
},
extraOptions: { file: "get_post.php" }
})
})
});
// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetPostQuery, useGetPostFnQuery } = postApi;
I expect the two lines ('hello world' and 'HELLO WORLD') to be loaded at the same time. However, the second line ('HELLO WORLD') is always loaded before the first ('hello world'), as you can see from the Code Sanbox here.
Here is the file get_post.php:
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, post, get');
header("Access-Control-Max-Age", "3600");
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
header("Access-Control-Allow-Credentials", "true");
sleep(1);
echo json_encode(array("post"=>file_get_contents("data".$_GET["id"].".txt")));
?>
How can I make the two lines load together as soon as possible?