Membina Jadual Data dengan Kemas Kini Optimis

pengenalan

Hari ini, saya akan berkongsi cara saya membina sistem pengurusan pangkalan data makanan yang digilap menggunakan corak React moden. Kami akan menumpukan pada mencipta jadual data responsif dengan kemas kini optimistik yang lancar, menggabungkan kuasa TanStack Query (dahulunya React Query) dengan pustaka komponen Mantine.

Gambaran Keseluruhan Projek

Keperluan

• Paparkan item makanan dalam jadual data
• Tambah item baharu dengan maklum balas segera
• Kendalikan pemuatan dan keadaan ralat dengan anggun
• Sediakan kemas kini optimistik yang lancar

Timbunan Teknologi

• Pertanyaan TanStack: Pengurusan keadaan pelayan
• UI Mantine: Perpustakaan komponen dan pengurusan borang
• Jadual Reaksi Mantine: Kefungsian jadual lanjutan
• Celaka: Panggilan API Bersih
• TypeScript: Taip keselamatan

Panduan Pelaksanaan

1. Menubuhkan Yayasan

Pertama, mari tentukan jenis dan konfigurasi API kami:

// Types
export type GetAllFoods = {
  id: number;
  name: string;
  category: string;
};

export type CreateNewFoodType = Pick<
  GetAllFoods,
  | 'name'
  | 'category'
>;

// API Configuration
export const API = wretch('<http://localhost:9999>').options({
  credentials: 'include',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

// TANSTACK QUERY 
export const getFoodOptions = () => {
  return queryOptions({
    queryKey: ['all-foods'],
    queryFn: async () => {
      try {
        return await API.get('/foods')
          .unauthorized(() => {
            console.log('Unauthorized');
          })
          .json<Array<GetAllFoods>>();
      } catch (e) {
        console.log({ e });
        throw e;
      }
    },
  });
};

export const useGetAllFoods = () => {
  return useQuery({
    ...getFoodOptions(),
  });
};

2. Membina Jadual Data

Komponen jadual menggunakan Mantine React Table:

const FoodsView = () => {
  const { data } = useGetAllFoods();

  const columns = useMemo<MRT_ColumnDef<GetAllFoods>[]>(
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
      },
      {
        accessorKey: 'name',
        header: 'Name',
      },
      {
        accessorKey: 'category',
        header: 'Category',
      },
      // ... other columns
    ],
    []
  );

  const table = useMantineReactTable({
    columns,
    data: data ?? [],
    // Optimistic update animation
    mantineTableBodyCellProps: ({ row }) => ({
      style: row.original.id < 0 ? {
        animation: 'shimmer-and-pulse 2s infinite',
        background: `linear-gradient(
          110deg,
          transparent 33%,
          rgba(83, 109, 254, 0.2) 50%,
          transparent 67%
        )`,
        backgroundSize: '200% 100%',
        position: 'relative',
      } : undefined,
    }),
  });

  return <MantineReactTable table={table} />;
};

3. Mencipta Borang

Komponen bentuk untuk menambah makanan baharu:

const CreateNewFood = () => {
  const { mutate } = useCreateNewFood();

  const formInputs = [
    { name: 'name', type: 'text' },
    { name: 'category', type: 'text' },
  ];

  const form = useForm<CreateNewFoodType>({
    initialValues: {
      name: '',
      category: '',
      // ... other fields
    },
  });

  return (
    <Box mt="md">
      <form onSubmit={form.onSubmit((data) => mutate(data))}>
        <Flex direction="column" gap="xs">
          {formInputs.map((input) => (
            <TextInput
              key={input.name}
              {...form.getInputProps(input.name)}
              label={input.name}
              tt="uppercase"
              type={input.type}
            />
          ))}
          <Button type="submit" mt="md">
            Create New
          </Button>
        </Flex>
      </form>
    </Box>
  );
};

4. Melaksanakan Kemas Kini Optimis

Inti pelaksanaan kami - mutasi TanStack Query dengan kemas kini yang optimistik:

export const useCreateNewFood = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationKey: ['create-new-food'],
    mutationFn: async (data: CreateNewFoodType) => {
      await new Promise(resolve => setTimeout(resolve, 3000)); // Demo delay
      return API.url('/foods').post(data).json<GetAllFoods>();
    },
    onMutate: async (newFood) => {
      // Cancel in-flight queries
      await queryClient.cancelQueries({ queryKey: ['all-foods'] });

      // Snapshot current state
      const previousFoods = queryClient.getQueryData<GetAllFoods[]>(['all-foods']);

      // Create optimistic entry
      const optimisticFood: GetAllFoods = {
        id: -Math.random(),
        ...newFood,
        verified: false,
        createdBy: 0,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      };

      // Update cache optimistically
      queryClient.setQueryData(['all-foods'], (old) =>
        old ? [...old, optimisticFood] : [optimisticFood]
      );

      return { previousFoods };
    },
    onError: (err, _, context) => {
      // Rollback on error
      if (context?.previousFoods) {
        queryClient.setQueryData(['all-foods'], context.previousFoods);
      }
    },
    onSettled: () => {
      // Refetch to ensure consistency
      queryClient.invalidateQueries({ queryKey: ['all-foods'] });
    },
  });
};

5. Gaya Animasi

Animasi yang menghidupkan kemas kini optimis kami:

@keyframes shimmer-and-pulse {
  0% {
    background-position: 200% 0;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(83, 109, 254, 0.2);
  }
  50% {
    background-position: -200% 0;
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(83, 109, 254, 0);
  }
  100% {
    background-position: 200% 0;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(83, 109, 254, 0);
  }
}

Amalan Terbaik

1. Kemas Kini Optimis
   • Kemas kini UI dengan segera untuk UX yang lebih baik
   • Kendalikan kes ralat dengan penarikan balik
   • Kekalkan konsistensi data dengan pembatalan yang betul
2. Jenis Keselamatan
   • Gunakan TypeScript untuk kebolehselenggaraan yang lebih baik
   • Tentukan antara muka yang jelas untuk struktur data
   • Leverage jenis inferens jika boleh
3. Prestasi
   • Batalkan pertanyaan dalam penerbangan semasa kemas kini
   • Gunakan pembatalan pertanyaan yang betul
   • Melaksanakan pengurusan keadaan bentuk yang cekap
4. Pengalaman Pengguna
   • Berikan maklum balas segera
   • Tunjukkan keadaan pemuatan
   • Kendalikan ralat dengan baik

Penambahbaikan Masa Depan

Pertimbangkan penambahbaikan ini untuk pelaksanaan anda:

• Buat asal/buat semula fungsi
• Peraturan pengesahan borang
• Ralat pelaksanaan sempadan

Keputusan

Permintaan Setelah Selesai

Kesimpulan

Pelaksanaan ini menunjukkan cara mencipta sistem pengurusan data yang teguh menggunakan corak React moden. Gabungan TanStack Query, UI Mantine dan kemas kini optimistik yang bertimbang rasa mencipta pengalaman pengguna yang lancar dan profesional.

Ingat kepada:

• Pastikan komponen anda fokus dan boleh diselenggara
• Kendalikan semua keadaan yang mungkin (pemuatan, ralat, kejayaan)
• Gunakan TypeScript untuk kualiti kod yang lebih baik
• Pertimbangkan pengalaman pengguna dalam pelaksanaan anda

---

Apakah cabaran yang anda hadapi dalam melaksanakan kemas kini optimistik dalam aplikasi React anda? Kongsi pengalaman anda dalam ulasan di bawah.

Atas ialah kandungan terperinci Membina Jadual Data dengan Kemas Kini Optimis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!