Multiple query keys loading the same data [ANSWERED]

Suppose I have the following screens:
* All posts (

GET /posts

GET /posts

)
* User's posts (

GET /users/{userId}/posts

GET /users/{userId}/posts

)
* Post details (

GET /posts/{postId}

GET /posts/{postId}

)

When accessing the post details, I want the

initialData

initialData

to check if this post was previously loaded by either the all posts query, or the user's posts query. I did this in the initial data by checking both separately using

queryClient.getQueryData

queryClient.getQueryData

as such:

const {
        data: post,
        isLoading,
        isError,
        refetch,
    } = useQuery({
        queryKey: ['posts', postId],
        queryFn: () => PostsAPI.getById(postId),
        initialData: () => {
            // Check if the post was fetched by userPosts
            const userPosts = queryClient.getQueryData<Post[]>(
                ['userPosts', userId]
            );
            const post = userPosts?.find((p) => p.id === postId);

            if (post) return post;

            // Check if the post was fetched by all posts
            const allPosts = queryClient.getQueryData<Post[]>(
                ['posts']
            );
            const post = allPosts?.find((p) => p.id === postId);

            if (post) return post;
        },
    });

const {
        data: post,
        isLoading,
        isError,
        refetch,
    } = useQuery({
        queryKey: ['posts', postId],
        queryFn: () => PostsAPI.getById(postId),
        initialData: () => {
            // Check if the post was fetched by userPosts
            const userPosts = queryClient.getQueryData<Post[]>(
                ['userPosts', userId]
            );
            const post = userPosts?.find((p) => p.id === postId);

            if (post) return post;

            // Check if the post was fetched by all posts
            const allPosts = queryClient.getQueryData<Post[]>(
                ['posts']
            );
            const post = allPosts?.find((p) => p.id === postId);

            if (post) return post;
        },
    });

At a first glance this does not look correct because it's violating DRY. But what is the proper way?

The solution that comes to mind is to pass the post as a prop to the post details and have that as the initial data, and meanwhile make a query to

posts/{id}

posts/{id}

, but I'm not 100% sure of this approach

TanStack•10mo ago•

5 replies

correct-teal

Multiple query keys loading the same data [ANSWERED]

Suppose I have the following screens:
* All posts (

GET /posts

GET /posts

)
* User's posts (

GET /users/{userId}/posts

GET /users/{userId}/posts

)
* Post details (

GET /posts/{postId}

GET /posts/{postId}

)

When accessing the post details, I want the

initialData

initialData

to check if this post was previously loaded by either the all posts query, or the user's posts query. I did this in the initial data by checking both separately using

queryClient.getQueryData

queryClient.getQueryData

as such:

const {
        data: post,
        isLoading,
        isError,
        refetch,
    } = useQuery({
        queryKey: ['posts', postId],
        queryFn: () => PostsAPI.getById(postId),
        initialData: () => {
            // Check if the post was fetched by userPosts
            const userPosts = queryClient.getQueryData<Post[]>(
                ['userPosts', userId]
            );
            const post = userPosts?.find((p) => p.id === postId);

            if (post) return post;

            // Check if the post was fetched by all posts
            const allPosts = queryClient.getQueryData<Post[]>(
                ['posts']
            );
            const post = allPosts?.find((p) => p.id === postId);

            if (post) return post;
        },
    });

const {
        data: post,
        isLoading,
        isError,
        refetch,
    } = useQuery({
        queryKey: ['posts', postId],
        queryFn: () => PostsAPI.getById(postId),
        initialData: () => {
            // Check if the post was fetched by userPosts
            const userPosts = queryClient.getQueryData<Post[]>(
                ['userPosts', userId]
            );
            const post = userPosts?.find((p) => p.id === postId);

            if (post) return post;

            // Check if the post was fetched by all posts
            const allPosts = queryClient.getQueryData<Post[]>(
                ['posts']
            );
            const post = allPosts?.find((p) => p.id === postId);

            if (post) return post;
        },
    });

posts/{id}

posts/{id}

, but I'm not 100% sure of this approach

Multiple query keys loading the same data [ANSWERED]

Similar Threads

Multiple query keys loading the same data [ANSWERED]

Similar Threads

Similar Threads

Similar Threads