Function QueryEditor

7.GraphQL Apocalypse/client/src/components/query-editor.tsx:19–159

()

}`;

export function QueryEditor() {
  const [query, setQuery] = useState(EXAMPLE_QUERY);
  const [result, setResult] = useState<QueryResult | null>(null);
  const { toast } = useToast();

  const executeMutation = useMutation({
    mutationFn: async (graphqlQuery: string) => {
      const res = await apiRequest("POST", "/api/graphql", { query: graphqlQuery });
      return await res.json() as QueryResult;
    },
    onSuccess: (data) => {
      setResult(data);
    },
    onError: (error: Error) => {
      toast({
        title: "Query Thất Bại",
        description: error.message,
        variant: "destructive",
      });
    },
  });

  const handleExecute = () => {
    executeMutation.mutate(query);
  };

  const handleCopy = async () => {
    if (result) {
      await navigator.clipboard.writeText(JSON.stringify(result, null, 2));
      toast({
        title: "Đã Sao Chép!",
        description: "Response đã được sao chép vào clipboard",
      });
    }
  };

  const handleClear = () => {
    setQuery("");
    setResult(null);
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-semibold flex items-center gap-2">
              <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
              Trình Soạn Query
            </h2>
            <div className="flex gap-2">
              <Button
                size="sm"
                variant="outline"
                onClick={handleClear}
                data-testid="button-clear"
              >
                <Trash2 className="w-4 h-4" />