Is there a way to getQueryData() with one key only?

[frederikhors]

I'm using the code from the docs: https://sveltequery.vercel.app/guides/placeholder-query-data#placeholder-data-from-cache:

const result = useQuery(["blogPost", blogPostId], () => fetch("/blogPosts"), {
  placeholderData: () => {
    // Use the smaller/preview version of the blogPost from the 'blogPosts' query as the placeholder data for this blogPost query
    return queryClient
      .getQueryData("blogPosts")
      ?.find((d) => d.id === blogPostId);
  },
});

My problem is I'm caching blogPosts along with pagination info, something like:

let pagination = { page: 1, limit: 20 };

$: posts = useQuery(
  ["blogPosts", pagination],
  async () => await fetchPosts({ pagination })
);

Is there a way I can use placeholderData with .getQueryData("blogPosts") key only (without pagination)?

[TkDodo]

have a look at queryClient.getQueryCache().findAll(), where you can pass filters to do fuzzy matching.

[frederikhors]

You were right. It doesn't work for list/detail with pagination.

The first query matched may not contain the post in the e.g. second page.

So I ended up with the below code, what do you think?

const result = useQuery(["blogPost", blogPostId], () => fetch("/blogPosts"), {
  placeholderData: () => {
    let postFound;

    useQueryClient()
      .getQueryCache()
      .findAll("blogPosts", { exact: false })
      .find((query) => {
        return query.state.data?.posts.find((p) => {
          if (p.id === postID) {
            postFound = p;
          }
        });
      });

    return postFound;
  },
});

Can you suggest something more elegant?

[TkDodo]

looks good, I think you can leave out exact: false because for findAll, it's the default. Also, you can't call useQueryClient in the placeholder callback (violates the rules of hooks), but just make your own custom hook:

const useBlogPostQuery = () => {
  const queryClient = useQueryClient()
  return useQuery(...)
}

[frederikhors]

Oh. Thanks for the exact. For the hooks, I'm using Svelte-Query, not React one. Is this different, right?

I'm using useQueryClient() documented here: https://sveltequery.vercel.app/reference/useQueryClient.

[frederikhors]

In Svelte we don't have hooks (a-la-React).

[TkDodo]

oh okay, I have no idea how hook work in svelte 😅 🤷