4.0 KiB
4.0 KiB
Basic Usage
Always prioritize using a supported framework over using the generated SDK directly. Supported frameworks simplify the developer experience and help ensure best practices are followed.
React
For each operation, there is a wrapper hook that can be used to call the operation.
Here are all of the hooks that get generated:
import { useListStaff, useCreateVendor, useUpdateVendor, useDeleteVendor, useCreateVendorRate, useUpdateVendorRate, useDeleteVendorRate, useCreateEvent, useUpdateEvent, useDeleteEvent } from '@dataconnect/generated/react';
// The types of these hooks are available in react/index.d.ts
const { data, isPending, isSuccess, isError, error } = useListStaff();
const { data, isPending, isSuccess, isError, error } = useCreateVendor(createVendorVars);
const { data, isPending, isSuccess, isError, error } = useUpdateVendor(updateVendorVars);
const { data, isPending, isSuccess, isError, error } = useDeleteVendor(deleteVendorVars);
const { data, isPending, isSuccess, isError, error } = useCreateVendorRate(createVendorRateVars);
const { data, isPending, isSuccess, isError, error } = useUpdateVendorRate(updateVendorRateVars);
const { data, isPending, isSuccess, isError, error } = useDeleteVendorRate(deleteVendorRateVars);
const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars);
const { data, isPending, isSuccess, isError, error } = useUpdateEvent(updateEventVars);
const { data, isPending, isSuccess, isError, error } = useDeleteEvent(deleteEventVars);
Here's an example from a different generated SDK:
import { useListAllMovies } from '@dataconnect/generated/react';
function MyComponent() {
const { isLoading, data, error } = useListAllMovies();
if(isLoading) {
return <div>Loading...</div>
}
if(error) {
return <div> An Error Occurred: {error} </div>
}
}
// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MyComponent from './my-component';
function App() {
const queryClient = new QueryClient();
return <QueryClientProvider client={queryClient}>
<MyComponent />
</QueryClientProvider>
}
Advanced Usage
If a user is not using a supported framework, they can use the generated SDK directly.
Here's an example of how to use it with the first 5 operations:
import { listStaff, createVendor, updateVendor, deleteVendor, createVendorRate, updateVendorRate, deleteVendorRate, createEvent, updateEvent, deleteEvent } from '@dataconnect/generated';
// Operation listStaff:
const { data } = await ListStaff(dataConnect);
// Operation CreateVendor: For variables, look at type CreateVendorVars in ../index.d.ts
const { data } = await CreateVendor(dataConnect, createVendorVars);
// Operation UpdateVendor: For variables, look at type UpdateVendorVars in ../index.d.ts
const { data } = await UpdateVendor(dataConnect, updateVendorVars);
// Operation DeleteVendor: For variables, look at type DeleteVendorVars in ../index.d.ts
const { data } = await DeleteVendor(dataConnect, deleteVendorVars);
// Operation CreateVendorRate: For variables, look at type CreateVendorRateVars in ../index.d.ts
const { data } = await CreateVendorRate(dataConnect, createVendorRateVars);
// Operation UpdateVendorRate: For variables, look at type UpdateVendorRateVars in ../index.d.ts
const { data } = await UpdateVendorRate(dataConnect, updateVendorRateVars);
// Operation DeleteVendorRate: For variables, look at type DeleteVendorRateVars in ../index.d.ts
const { data } = await DeleteVendorRate(dataConnect, deleteVendorRateVars);
// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts
const { data } = await CreateEvent(dataConnect, createEventVars);
// Operation UpdateEvent: For variables, look at type UpdateEventVars in ../index.d.ts
const { data } = await UpdateEvent(dataConnect, updateEventVars);
// Operation DeleteEvent: For variables, look at type DeleteEventVars in ../index.d.ts
const { data } = await DeleteEvent(dataConnect, deleteEventVars);