Skip to content

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

Merged
SomaticIT merged 1 commit intoSvelteStack:mainfrom
SomaticIT:@feat/infer-queries
Nov 11, 2021
Merged

feat(queries): infer types correctly when using useQueries#56
SomaticIT merged 1 commit intoSvelteStack:mainfrom
SomaticIT:@feat/infer-queries

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