docs: Update query-key-factory example (#5277)

TanStack · Apr 15, 2023 · b99ae60 · b99ae60
1 parent a9ddb4d
commit b99ae60
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/docs/react/community/lukemorales-query-key-factory.md b/docs/react/community/lukemorales-query-key-factory.md
@@ -28,9 +28,11 @@ import { createQueryKeyStore } from '@lukemorales/query-key-factory'
 export const queryKeys = createQueryKeyStore({
   users: null,
   todos: {
-    completed: null,
-    search: (query: string, limit = 15) => [query, limit],
-    byId: (todoId: string) => ({ todoId }),
+    detail: (todoId: string) => [todoId],
+    list: (filters: TodoFilters) => ({
+      queryKey: [{ filters }],
+      queryFn: (ctx) => api.getTodos({ filters, page: ctx.pageParam }),
+    }),
   },
 })
 ```
@@ -44,9 +46,11 @@ export const usersKeys = createQueryKeys('users')
 
 // my-api/todos.ts
 export const todosKeys = createQueryKeys('todos', {
-  completed: null,
-  search: (query: string, limit = 15) => [query, limit],
-  byId: (todoId: string) => ({ todoId }),
+  detail: (todoId: string) => [todoId],
+  list: (filters: TodoFilters) => ({
+    queryKey: [{ filters }],
+    queryFn: (ctx) => api.getTodos({ filters, page: ctx.pageParam }),
+  }),
 })
 
 // my-api/index.ts
@@ -60,13 +64,13 @@ import { queryKeys, completeTodo, fetchSingleTodo } from '../my-api'
 export function Todo({ todoId }) {
   const queryClient = useQueryClient()
 
-  const query = useQuery({ queryKey: queryKeys.todos.byId(todoId), queryFn: fetchSingleTodo })
+  const query = useQuery(queryKeys.todos.detail(todoId))
 
   const mutation = useMutation({
     mutationFn: () => completeTodo,
     onSuccess: () => {
       // Invalidate and refetch
-      queryClient.invalidateQueries({ queryKey: queryKeys.todos.completed })
+      queryClient.invalidateQueries({ queryKey: queryKeys.todos.list.queryKey })
     },
   })