Tags (Kapitel 12) sind SCHREIBGESCHÜTZT über die API – das Frontend liest sie NUR, um sie in einem Auswahl-Element ANZUZEIGEN, GENAU wie in Kapitel 42 beschrieben.

Alle Tags laden

import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../api/client';

interface Tag {
  '@id': string;
  id: number;
  name: string;
}

interface TagCollection {
  'hydra:member': Tag[];
}

export function useTags() {
  return useQuery({
    queryKey: ['tags'],
    queryFn: async () => {
      const response = await apiClient.get<TagCollection>('/tags');

      return response.data['hydra:member'];
    },
    staleTime: Infinity,
  });
}

staleTime: Infinity statt der 30 Sekunden aus Kapitel 73 – Tags ändern sich (Kapitel 12: NUR per Fixtures/Admin) SO SELTEN, dass ein wiederholtes automatisches Neuladen VERSCHWENDET wäre.

Das Multi-Select-Element

function TagSelector({
  selectedIris,
  onChange,
}: {
  selectedIris: string[];
  onChange: (iris: string[]) => void;
}) {
  const { data: tags, isPending } = useTags();

  if (isPending) {
    return null;
  }

  function toggle(iri: string) {
    if (selectedIris.includes(iri)) {
      onChange(selectedIris.filter((current) => current !== iri));
    } else {
      onChange([...selectedIris, iri]);
    }
  }

  return (
    <div>
      {tags.map((tag) => (
        <label key={tag.id}>
          <input
            type="checkbox"
            checked={selectedIris.includes(tag['@id'])}
            onChange={() => toggle(tag['@id'])}
          />
          {tag.name}
        </label>
      ))}
    </div>
  );
}

selectedIris: string[] speichert die AUSGEWÄHLTEN Tags DIREKT als IRI-Array – GENAU das Format, das useCreateTask (Kapitel 87) ERWEITERT um ein tags-Feld DIREKT an die API senden könnte, OHNE weitere Umwandlung.

Integration in das Task-Formular

const [selectedTagIris, setSelectedTagIris] = useState<string[]>([]);

// im JSX:
<TagSelector selectedIris={selectedTagIris} onChange={setSelectedTagIris} />

// beim Absenden:
createTask.mutate({ title, projectId, tags: selectedTagIris });