diff --git a/develop-docs/frontend/network-requests.mdx b/develop-docs/frontend/network-requests.mdx
index ec368360dea9b..776aedacbcd63 100644
--- a/develop-docs/frontend/network-requests.mdx
+++ b/develop-docs/frontend/network-requests.mdx
@@ -32,7 +32,7 @@ type ProjectsListProps = {org: string};
function ProjectsList({org}: ProjectsListProps) {
const {
- isLoading,
+ isPending,
isError,
data: projects,
refetch,
@@ -40,7 +40,7 @@ function ProjectsList({org}: ProjectsListProps) {
staleTime: 0,
});
- if (isLoading) {
+ if (isPending) {
return ;
}
@@ -112,7 +112,7 @@ export function useFetchProjects(
// ProjectsPage.tsx
function ProjectsPage({orgSlug}: EventsPageProps) {
- const {isLoading, isError, data} = useFetchProjects({orgSlug});
+ const {isPending, isError, data} = useFetchProjects({orgSlug});
return (...)
}
@@ -131,7 +131,7 @@ Note that we add an `options` argument to our `useFetchProjects` hook so that co
- If you know that your data will already be in the cache and you only want to extract the data from it, use this option to prevent rerenders when other `useApiQuery` states change.
- `enabled: `
- If this query is dependent on information that isn’t available yet, make sure to disable it until you have everything you need.
- - Be aware that disabled queries will always return `isLoading: true`! Make sure to account for this in your components with disabled queries.
+ - Be aware that disabled queries will always return `isPending: true`! In these cases it is often better to use `isLoading` instead, which is the same as `isFetching && isPending`.
Also make note of the function `makeFetchProjectsQueryKey`. We extract out the query key creation to its own function so that consumers of this hook can also update and refetch without having to recreate the query key manually, which can be prone to error.