Double fetching with React Router

I am using React Router v6 with a loader function.

The loader is being called before the page loads, so initially, it runs and then displays the component/route.

However, when I try to access query data using a hook, it makes a new request. Currently, it makes a request in the loader and then again when the component mounts.

If I use

getQueryData

getQueryData

, I get the data received in the loader.

postQuery()

postQuery()

contains only the

queryKey

queryKey

and

Fn

Fn

.

How can I prevent double fetching for already fetched queries from loaders? I'm not sure if it makes sense to make double requests.

P.S. I don't want to disable refetching everywhere, only in cases where the second call is redundant.

export const loader = async (queryClient: QueryClient) => {
    let post: Post | undefined

    try {
        post = queryClient.getQueryData(postQuery(1).queryKey)

        if (!post) {
            post = await queryClient.fetchQuery(postQuery(1))
        }
    } catch (error) {
        queryClient.resetQueries(postQuery(slug).queryKey)
        throw new Response("Not Found", { status: 404 })
    }

    return post
}

export const PostView = () => {
    const { data: post } = useQuery<PostData>(postQuery(1)) // fetching post again

    const loaderPostData = queryClient.getQueryData(postQuery(1).queryKey) // returns fetched post in loader

    return (
        ...
    )
}

export const loader = async (queryClient: QueryClient) => {
    let post: Post | undefined

    try {
        post = queryClient.getQueryData(postQuery(1).queryKey)

        if (!post) {
            post = await queryClient.fetchQuery(postQuery(1))
        }
    } catch (error) {
        queryClient.resetQueries(postQuery(slug).queryKey)
        throw new Response("Not Found", { status: 404 })
    }

    return post
}

export const PostView = () => {
    const { data: post } = useQuery<PostData>(postQuery(1)) // fetching post again

    const loaderPostData = queryClient.getQueryData(postQuery(1).queryKey) // returns fetched post in loader

    return (
        ...
    )
}

TanStack•3y ago•

8 replies

incredible-moccasin

Double fetching with React Router

getQueryData

getQueryData

, I get the data received in the loader.

postQuery()

postQuery()

contains only the

queryKey

queryKey

and

Fn

Fn

export const loader = async (queryClient: QueryClient) => {
    let post: Post | undefined

    try {
        post = queryClient.getQueryData(postQuery(1).queryKey)

        if (!post) {
            post = await queryClient.fetchQuery(postQuery(1))
        }
    } catch (error) {
        queryClient.resetQueries(postQuery(slug).queryKey)
        throw new Response("Not Found", { status: 404 })
    }

    return post
}

export const PostView = () => {
    const { data: post } = useQuery<PostData>(postQuery(1)) // fetching post again

    const loaderPostData = queryClient.getQueryData(postQuery(1).queryKey) // returns fetched post in loader

    return (
        ...
    )
}

export const loader = async (queryClient: QueryClient) => {
    let post: Post | undefined

    try {
        post = queryClient.getQueryData(postQuery(1).queryKey)

        if (!post) {
            post = await queryClient.fetchQuery(postQuery(1))
        }
    } catch (error) {
        queryClient.resetQueries(postQuery(slug).queryKey)
        throw new Response("Not Found", { status: 404 })
    }

    return post
}

export const PostView = () => {
    const { data: post } = useQuery<PostData>(postQuery(1)) // fetching post again

    const loaderPostData = queryClient.getQueryData(postQuery(1).queryKey) // returns fetched post in loader

    return (
        ...
    )
}

Double fetching with React Router

Similar Threads

Double fetching with React Router

Similar Threads

Similar Threads

Similar Threads