Invalidating query/route after mutation

import { eventsQueryOptions } from '../query-options';
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/events/')({
  component: RouteComponent,
  loader: async ({ context }) => await context.queryClient.ensureQueryData(eventsQueryOptions),
});

function RouteComponent() {
  const events = Route.useLoaderData();

  return (
    <div>
      <Link to='/events/new'>
        <Button>Create new event</Button>
      </Link>
      <ul>
        {events.map((event) => (<li key={event.uuid}>{event.name}</li>))}
      </ul>
    </div>
  );
}

import { eventsQueryOptions } from '../query-options';
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/events/')({
  component: RouteComponent,
  loader: async ({ context }) => await context.queryClient.ensureQueryData(eventsQueryOptions),
});

function RouteComponent() {
  const events = Route.useLoaderData();

  return (
    <div>
      <Link to='/events/new'>
        <Button>Create new event</Button>
      </Link>
      <ul>
        {events.map((event) => (<li key={event.uuid}>{event.name}</li>))}
      </ul>
    </div>
  );
}

import { useMutation } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
import { createEvent } from '../events';
import { eventsQueryOptions } from '../query-options';
import { useQueryClient } from '@tanstack/react-query';

export const Route = createFileRoute('/events/new/')({
  component: RouteComponent,
});

function RouteComponent() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: createEvent,
    onSuccess: async (response) => {
      await queryClient.invalidateQueries({ queryKey: eventsQueryOptions.queryKey });
      await router.invalidate();
      await router.navigate({ to: '/events' });
    }
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const data = {
      name: formData.get('name') as string,
    };
    mutation.mutate(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />

      <input type="submit" />

      {mutation.isPending && <p>Submitting...</p>}
      {mutation.isError && <p>Error!</p>}
      {mutation.isSuccess && <p>Submitted successfully!</p>}
    </form>
  );
}

import { useMutation } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
import { createEvent } from '../events';
import { eventsQueryOptions } from '../query-options';
import { useQueryClient } from '@tanstack/react-query';

export const Route = createFileRoute('/events/new/')({
  component: RouteComponent,
});

function RouteComponent() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: createEvent,
    onSuccess: async (response) => {
      await queryClient.invalidateQueries({ queryKey: eventsQueryOptions.queryKey });
      await router.invalidate();
      await router.navigate({ to: '/events' });
    }
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const data = {
      name: formData.get('name') as string,
    };
    mutation.mutate(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />

      <input type="submit" />

      {mutation.isPending && <p>Submitting...</p>}
      {mutation.isError && <p>Error!</p>}
      {mutation.isSuccess && <p>Submitted successfully!</p>}
    </form>
  );
}