Skip to content

feat(queries): infer types correctly when using useQueries #56

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

Merged
merged 1 commit into from
Nov 11, 2021

Conversation

SomaticIT
Copy link
Collaborator

Hi,

Description

This PR improve the behavior of the useQueries function.

  1. It allows typescript to automatically infer types from arguments
  2. It allows to specify manually the generic types of arguments

Automatic inference

const queryFn = () => "hello";
const queryFn2 = async () => "world";
const queryFn3 = async () => true;

// single type list detection
const singleTypeQueriesStore = useQueries([
  { queryKey: 'myQuery', queryFn },
  { queryKey: 'myQuery2', queryFn: queryFn2 },
]);
$: singleTypeData = $singleTypeQueriesStore.map(q => q.data); // singleTypeData is string[]

// multi-type list detection
const multiTypeQueriesStore = useQueries([
  { queryKey: 'myQuery', queryFn },
  { queryKey: 'myQuery2', queryFn: queryFn2 },
  { queryKey: 'myQuery3', queryFn: queryFn3 },
]);
$: multiTypeData = $multiTypeQueriesStore.map(q => q.data); // multiTypeData is (string | boolean)[]

// readonly tupple list detection
const tuppleQueriesStore = useQueries([
  { queryKey: 'myQuery', queryFn },
  { queryKey: 'myQuery2', queryFn: queryFn2 },
  { queryKey: 'myQuery3', queryFn: queryFn3 },
] as const);
$: tuppleData0 = $tuppleQueriesStore[0].data // tuppleData0 is string
$: tuppleData1 = $tuppleQueriesStore[1].data // tuppleData1 is string
$: tuppleData2 = $tuppleQueriesStore[2].data // tuppleData2 is boolean

Manual type selection

const queryFn = () => "hello";
const queryFn2 = async () => "world";
const queryFn3 = async () => true;

useQueries<string>([
  { queryKey: 'myQuery', queryFn },
  { queryKey: 'myQuery2', queryFn: queryFn2 },
]);
// OK

useQueries<string>([
  { queryKey: 'myQuery', queryFn },
  { queryKey: 'myQuery2', queryFn: queryFn2 },
  { queryKey: 'myQuery3', queryFn: queryFn3 },
]);
// Error

const emptyQuery = useQueries<string>([]);
// OK

const stringQuery = useQueries<string>([]);
stringQuery.setQueries([
  { queryKey: 'myQuery', queryFn },
  { queryKey: 'myQuery2', queryFn: queryFn2 },
]);
// OK

const stringQuery2 = useQueries<string>([]);
stringQuery2.setQueries([
  { queryKey: 'myQuery', queryFn },
  { queryKey: 'myQuery2', queryFn: queryFn2 },
  { queryKey: 'myQuery3', queryFn: queryFn3 },
]);
// Error

const mixedQuery = useQueries<string | boolean>([]);
mixedQuery.setQueries([
  { queryKey: 'myQuery', queryFn },
  { queryKey: 'myQuery2', queryFn: queryFn2 },
  { queryKey: 'myQuery3', queryFn: queryFn3 },
]);
// OK

@SomaticIT
Copy link
Collaborator Author

@amen-souissi, any news on this?

@SomaticIT SomaticIT merged commit e87d25c into SvelteStack:main Nov 11, 2021
@SomaticIT SomaticIT deleted the @feat/infer-queries branch November 11, 2021 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant