useQuery Placeholder + Typescript

[writes-of-spring]

Hey, how do I correctly type a query that uses placeholder data of a different type,

const fetchPosts = async (): Promise<Post[]> => {
  const { data }: { data: Post[] } = await axios.get(
    "https://jsonplaceholder.typicode.com/posts"
  );
  return data;
};

const fetchModifiedPosts = async (): Promise<UpperPost[]> => {
  const { data }: { data: Post[] } = await axios.get(
    "https://jsonplaceholder.typicode.com/posts"
  );
  return data.map((post) => ({
    ...post,
    title: post.title.toUpperCase(),
    different: true,
  }));
};

for useModifiedPosts, the return value is inferred as UseQueryResult<Post[], unknown>
but the useQuery is inferred as useQuery<UpperPost[], unknown, Post[]>

Code sandbox link https://codesandbox.io/s/intelligent-mendel-evrm3

Thanks for any help / info you can provide!

[TkDodo]

on type level, placeholderData needs to return the same type that data from useQuery returns.
since you've implemented placeholderData with queryClient.getQueryData, I think you need to annotate getQueryData. per default, it returns unknown, because there is no correlation between a query key and the type of data that is in there.

so I think this should work:

placeholderData: () => queryClient.getQueryData<Post[]>("posts") ?? []

[writes-of-spring]

Thanks for the reply!

By adding types to placeholder's getQueryData, that seems to overwrite the type which useQuery returns, so I guess my best best would be to return the ModifiedPost type from that, because while they are different, they won't appear different on the screen (type wise)

Thanks