React Query

Lecture et ecriture avec useActionQuery et useActionMutation.

​

React Query

​

Installation

terminal

pnpm add @zapaction/query @tanstack/react-query

​

Lecture avec useActionQuery

components/todo-panel.tsx

"use client";

import { useActionQuery } from "@zapaction/query";
import { listTodos } from "../app/actions";

const todosQuery = useActionQuery(listTodos, {
  input: {},
  queryKey: ["todos"],
  readPolicy: "read-only"
});

​

Ecriture avec useActionMutation

components/todo-panel.tsx

import { useActionMutation } from "@zapaction/query";
import { createTodo } from "../app/actions";

const createMutation = useActionMutation(createTodo, {
  invalidateOnSuccess: true
});

​

Alignement keys/tags

app/query-keys.ts

import { createFeatureKeys, createFeatureTags } from "@zapaction/core";

export const todoKeys = createFeatureKeys("todos", {
  all: () => [],
  byUser: (userId: string) => ["by-user", userId]
});

export const todoTags = createFeatureTags("todos", {
  byUser: (userId: string) => ["by-user", userId]
});