Skip to content

Instantly share code, notes, and snippets.

@james-gardner
Forked from anthowen/createCrudHooks.js
Created March 8, 2022 11:23
Show Gist options
  • Save james-gardner/48a9fe5a73769ce9ec0defb54fd12b36 to your computer and use it in GitHub Desktop.
Save james-gardner/48a9fe5a73769ce9ec0defb54fd12b36 to your computer and use it in GitHub Desktop.
A naive, but efficient starter to generate crud hooks for React Query
export default function createCrudHooks({
baseKey,
indexFn,
singleFn,
createFn,
updateFn,
deleteFn,
}) {
const useIndex = (config) => useQuery([baseKey], indexFn, config)
const useSingle = (id, config) =>
useQuery([baseKey, id], () => singleFn(id), config)
const useCreate = (config = {}) =>
useMutation(createFn, {
...config,
onSuccess: (...args) => {
queryCache.invalidateQueries([baseKey])
if (config.onSuccess) config.onSuccess(...args)
},
})
const useUpdate = (config = {}) =>
useMutation(updateFn, {
...config,
onSuccess: (...args) => {
queryCache.invalidateQueries([baseKey])
if (config.onSuccess) config.onSuccess(...args)
},
})
const useDelete = (config = {}) =>
useMutation(deleteFn, {
...config,
onSuccess: (...args) => {
queryCache.invalidateQueries([baseKey])
if (config.onSuccess) config.onSuccess(...args)
},
})
return [useIndex, useSingle, useCreate, useUpdate, useDelete]
}
import createCrudHooks from './createCrudHooks'
const [
useTodos,
useTodo,
useCreateTodo,
useUpdateTodo,
useDeleteTodo,
] = createCrudHooks({
baseKey: 'todos',
indexFn: () => axios.get('/todos'),
singleFn: (id) => axios.get(`/todos/${id}`),
createFn: (payload) => axios.post(`/todos`, payload),
updateFn: (payload) => axios.patch(`/todos/${payload.id}`, payload),
deleteFn: (id) => axios.delet(`/todos/${id}`),
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment