Data Fetching

import { api } from '@vendure/dashboard';

import { useQuery, api } from '@vendure/dashboard';import { graphql } from '@/gql';const getProductsQuery = graphql(`    query GetProducts($options: ProductListOptions) {        products(options: $options) {            items {                id                name                slug            }            totalItems        }    }`);function ProductList() {    const { data, isLoading, error } = useQuery({        queryKey: ['products'],        queryFn: () =>            api.query(getProductsQuery, {                options: {                    take: 10,                    skip: 0,                },            }),    });    if (isLoading) return <div>Loading...</div>;    if (error) return <div>Error: {error.message}</div>;    return <ul>{data?.products.items.map(product => <li key={product.id}>{product.name}</li>)}</ul>;}

import { useMutation, useQueryClient, api, toast } from '@vendure/dashboard';import { graphql } from '@/gql';const updateProductMutation = graphql(`    mutation UpdateProduct($input: UpdateProductInput!) {        updateProduct(input: $input) {            id            name            slug        }    }`);function ProductForm({ product }) {    const queryClient = useQueryClient();    const mutation = useMutation({        mutationFn: input => api.mutate(updateProductMutation, { input }),        onSuccess: () => {            // Invalidate and refetch product queries            queryClient.invalidateQueries({ queryKey: ['products'] });            toast.success('Product updated successfully');        },        onError: error => {            toast.error('Failed to update product', {                description: error.message,            });        },    });    const handleSubmit = data => {        mutation.mutate({            id: product.id,            ...data,        });    };    return (        // Form implementation        <form onSubmit={handleSubmit}>{/* Form fields */}</form>    );}