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

Allow typing the query type and Error when using useQuery #40

Open
ghost opened this issue Nov 18, 2022 · 4 comments
Open

Allow typing the query type and Error when using useQuery #40

ghost opened this issue Nov 18, 2022 · 4 comments
Assignees
Labels
help wanted Extra attention is needed question Further information is requested

Comments

@ghost
Copy link

ghost commented Nov 18, 2022

Taking this from the example:

export const users = createQueryKeys('users', {
  list: () => ({
    queryKey: [],
    queryFn: () => api.findAll(),
  }),
});

export function useUserList() {
  return useQuery(users.list);
};

When doing:

export function useUserDetail(id: string) {
  return useQuery<User[], Error>(users.list);
};

you get:

"Type 'NonNullable<TQueryFnData> | never[]' is not assignable to type 'User[]'

I'm afraid I'm having trouble using either codesandbox or stackblitz on my computer, so I can't provide a repro here :(
I did consider providng a failing test, but you don't seem to test against useQuery directly in this repo according to the code search.

The query does work just fine though, but I want to be able to type the second param as Error

@lukemorales lukemorales added help wanted Extra attention is needed question Further information is requested labels Nov 21, 2022
@lukemorales lukemorales self-assigned this Nov 21, 2022
@lukemorales
Copy link
Owner

lukemorales commented Nov 22, 2022

@jrobeson the issue is that once you pass generics manually to a function, Typescript stops inferring the values and what you're experiencing is Typescript complaining about QueryKey default value not matching the typed queryKey that comes from the package.

If you'd want to always have error typed as Error instead of unknown, I'm afraid there's no solution other than manually pass the 4 generic values:

export const users = createQueryKeys('users', {
  list: { // also note that in this case you need a direct object instead of a function since you don't have arguments
    queryKey: null,
    queryFn: queryFn: () => api.findAll(),
  },
});

export function useUserList() {
  return useQuery<User[], Error, User[], typeof users.list.queryKey>(users.list);
};

But I don't think that's worth the added complexity, and also, the roadmap to v5 indicates that they'll probably make error default to Error instead of unknown, so bear with them for a while and you should get the end result you want in the next few months

@ghost
Copy link
Author

ghost commented Nov 22, 2022

I've never had to do all 4 params before, so that's why I was confused. I'll probalby provide them in the meantime then. thanks

@lukemorales
Copy link
Owner

I've never had to do all 4 params before, so that's why I was confused. I'll probalby provide them in the meantime then. thanks

It's mostly because users.list.queryFn comes fully typed with the QueryFunction type already knowing the shape of QueryKey, so it conflicts with the generic QueryKey fallback present in useQuery

@lukemorales
Copy link
Owner

Perhaps making the type less strict there might be more useful? Let me sleep on that ideia

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed question Further information is requested
Projects
None yet
Development

No branches or pull requests

1 participant