2.18.0 • Published 12 months ago

@leather.io/query v2.18.0

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

@leather.io/queries

We use React Query to fetch APIs and to manage the cache of the responses.

Code practices:

  1. Create custom hooks for queries, don't use plain useQuery in components.
  2. Treat the query key like a dependency array. queryFn should receive same arguments as a queryKey.
  3. 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));
  1. 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,
  })
}
  1. 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)];
  1. 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