# 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:
```ts
import { useCreateMessage, useUpdateMessage, useDeleteMessage, useCreateStaff, useUpdateStaff, useDeleteStaff, useListTeamMemberInvite, useGetTeamMemberInviteById, useFilterTeamMemberInvite, useCreateVendor } from '@dataconnect/generated/react';
// The types of these hooks are available in react/index.d.ts

const { data, isPending, isSuccess, isError, error } = useCreateMessage(createMessageVars);

const { data, isPending, isSuccess, isError, error } = useUpdateMessage(updateMessageVars);

const { data, isPending, isSuccess, isError, error } = useDeleteMessage(deleteMessageVars);

const { data, isPending, isSuccess, isError, error } = useCreateStaff(createStaffVars);

const { data, isPending, isSuccess, isError, error } = useUpdateStaff(updateStaffVars);

const { data, isPending, isSuccess, isError, error } = useDeleteStaff(deleteStaffVars);

const { data, isPending, isSuccess, isError, error } = useListTeamMemberInvite();

const { data, isPending, isSuccess, isError, error } = useGetTeamMemberInviteById(getTeamMemberInviteByIdVars);

const { data, isPending, isSuccess, isError, error } = useFilterTeamMemberInvite(filterTeamMemberInviteVars);

const { data, isPending, isSuccess, isError, error } = useCreateVendor(createVendorVars);

```

Here's an example from a different generated SDK:

```ts
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:

```js
import { createMessage, updateMessage, deleteMessage, createStaff, updateStaff, deleteStaff, listTeamMemberInvite, getTeamMemberInviteById, filterTeamMemberInvite, createVendor } from '@dataconnect/generated';


// Operation CreateMessage:  For variables, look at type CreateMessageVars in ../index.d.ts
const { data } = await CreateMessage(dataConnect, createMessageVars);

// Operation UpdateMessage:  For variables, look at type UpdateMessageVars in ../index.d.ts
const { data } = await UpdateMessage(dataConnect, updateMessageVars);

// Operation DeleteMessage:  For variables, look at type DeleteMessageVars in ../index.d.ts
const { data } = await DeleteMessage(dataConnect, deleteMessageVars);

// Operation CreateStaff:  For variables, look at type CreateStaffVars in ../index.d.ts
const { data } = await CreateStaff(dataConnect, createStaffVars);

// Operation UpdateStaff:  For variables, look at type UpdateStaffVars in ../index.d.ts
const { data } = await UpdateStaff(dataConnect, updateStaffVars);

// Operation DeleteStaff:  For variables, look at type DeleteStaffVars in ../index.d.ts
const { data } = await DeleteStaff(dataConnect, deleteStaffVars);

// Operation listTeamMemberInvite: 
const { data } = await ListTeamMemberInvite(dataConnect);

// Operation getTeamMemberInviteById:  For variables, look at type GetTeamMemberInviteByIdVars in ../index.d.ts
const { data } = await GetTeamMemberInviteById(dataConnect, getTeamMemberInviteByIdVars);

// Operation filterTeamMemberInvite:  For variables, look at type FilterTeamMemberInviteVars in ../index.d.ts
const { data } = await FilterTeamMemberInvite(dataConnect, filterTeamMemberInviteVars);

// Operation CreateVendor:  For variables, look at type CreateVendorVars in ../index.d.ts
const { data } = await CreateVendor(dataConnect, createVendorVars);


```