2.18.0 • Published 12 months ago
@leather.io/query v2.18.0
@leather.io/queries
We use React Query
to fetch APIs and to manage the cache of the responses.
Code practices:
- Create custom hooks for queries, don't use plain
useQuery
in components. - Treat the query key like a dependency array. queryFn should receive same arguments as a queryKey.
- Use selectors to transform the data before usage. Example:
export const useTodosQuery = select =>
useQuery({
queryKey: ['todos'],
queryFn: fetchTodos,
select,
});
export const useTodosCount = () => useTodosQuery(data => data.length);
export const useTodo = id => useTodosQuery(data => data.find(todo => todo.id === id));
- Keep api layer separate from the queries (queryFn separate from useQueries). Example:
function fetchGroups(): Promise<Group[]> {
return axios.get('groups').then((response) => response.data)
}
// ✅ data will be `Group[] | undefined` here
function useGroups() {
return useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
}
// ✅ data will be `number | undefined` here
function useGroupCount() {
return useQuery({
queryKey: ['groups'],
queryFn: fetchGroups,
select: (groups) => groups.length,
})
}
- Structure your Query Keys from most generic to most specific. Example:
['todos', 'list', { filters: 'all' }][('todos', 'list', { filters: 'done' })][
('todos', 'detail', 1)
][('todos', 'detail', 2)];
- Optional: we might want to try the concept of query key factory: https://tkdodo.eu/blog/effective-react-query-keys#use-query-key-factories
Reference: https://tkdodo.eu/blog/practical-react-query
2.18.0
12 months ago
2.17.0
12 months ago
2.16.0
12 months ago
2.15.2
1 year ago
2.15.0
1 year ago
2.15.1
1 year ago
2.14.1
1 year ago
2.14.0
1 year ago
2.13.1
1 year ago
2.13.0
1 year ago
2.11.0
1 year ago
2.12.0
1 year ago
2.10.1
1 year ago
2.10.0
1 year ago
2.9.0
1 year ago
2.8.0
1 year ago
2.7.1
1 year ago
2.7.0
1 year ago
2.6.1
1 year ago
2.6.0
1 year ago
2.5.0
1 year ago
2.4.3
1 year ago
2.4.2
1 year ago
2.4.1
1 year ago
2.4.0
1 year ago
2.3.0
1 year ago
2.2.0
1 year ago
2.1.0
1 year ago
2.0.2
1 year ago
2.0.1
1 year ago
2.0.0
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago
0.11.3
1 year ago
0.11.2
1 year ago
0.11.1
1 year ago
0.11.0
1 year ago
0.10.2
1 year ago
0.10.1
1 year ago
0.10.0
1 year ago
0.9.5
1 year ago
0.9.4
1 year ago
0.9.3
1 year ago
0.9.2
1 year ago
0.9.1
1 year ago
0.9.0
1 year ago