Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte: passing a store to createQuery breaks types when using select #7673

Open
o-az opened this issue Jul 4, 2024 · 2 comments
Open

Svelte: passing a store to createQuery breaks types when using select #7673

o-az opened this issue Jul 4, 2024 · 2 comments

Comments

@o-az
Copy link
Contributor

o-az commented Jul 4, 2024

Describe the bug

using the latest version of tanstack query svelte, passing derived store and using select to select subset of the data makes the data in select type any and breaks the query types.

Playground link: https://tsplay.dev/mpkn6N

Example. This works:

// query type works as expected
const queryThatWorks = createQuery(
  derived(intervalMs, ($intervalMs) => ({
    queryKey: ["refetch"],
    queryFn: async () => ({ a: { b: { c: "" } } }),
    refetchInterval: $intervalMs,
  })),
);
const result1 = get(queryThatWorks)?.data;
//     ^? const result: {a: Eb: { c: string; 3; };..

this doesn't:

// `select` data is type any
const queryWithBrokenTypes = createQuery(
  derived(intervalMs, ($intervalMs) => ({
    queryKey: ["refetch"],
    queryFn: async () => ({ a: { b: { c: "" } } }),
    refetchInterval: $intervalMs,
    // data type is any, never inferred
    select: (data) => data,
    //       ^? (parameter) data: any
  })),
);
const result2 = get(queryWithBrokenTypes)?.data;
//     ^? const result2: any

this shows that select works without derived:

// `select` works without `derived`
const queryWithSelectWorks = createQuery({
  queryKey: ["refetch"],
  queryFn: async () => ({ a: { b: { c: "" } } }),
  // data type is any, never inferred
  select: (data) => data,
  //       ^? (parameter) data: {a: {b: { c: string; ) ;..
});

const result3 = get(queryWithSelectWorks)?.data;
//     ^? const result3: { a: {b: (c: string; ); );

Your minimal, reproducible example

https://tsplay.dev/mpkn6N

Steps to reproduce

  1. create a query in svelte,
  2. pass a derived store,
  3. use select in the query,
  4. notice how data type is any.

see twoslash shiki comments

Expected behavior

it should not break types when passing a store and using select to createQuery

How often does this bug happen?

Every time

Screenshots or Videos

CleanShot 2024-07-04 at 19 06 19

Platform

all

Tanstack Query adapter

svelte-query

TanStack Query version

^5.49.1

TypeScript version

6.5.2

Additional context

No response

@o-az o-az changed the title Svelte: passing a store to createQuery still breaks typescript Svelte: passing a store to createQuery breaks types when using select Jul 5, 2024
@PhilippMolitor
Copy link

PhilippMolitor commented Jul 17, 2024

might be related to my bug report: #7668

@lachlancollins
Copy link
Member

This may be fixed by #6981

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants