Zendesk Custom Objects React Hooks

A TypeScript library providing React hooks for seamless integration with Zendesk Custom Objects Records API. Built on top of React Query for optimal caching, error handling, and data synchronization.

Installation

``bash
npm install zendesk-custom-objects-working-hooks


or

Wrap your app with the CustomObjectsProvider:

`tsx
import { CustomObjectsProvider } from 'co-custom-hooks';

function App() {
return (



);
}
`

$3

`tsx
import { useQueryCustomObjects } from 'co-custom-hooks';

function UsersList() {
const { data, isLoading, error } = useQueryCustomObjects({
customObjectKey: "users",
translateFn: (raw) => raw.map(user => ({
id: user.id,
name: user.custom_object_fields.name,
email: user.custom_object_fields.email
})),
refetchOnTabChange: true,
searchBySingleField: { by: "status", value: "active" }
});

if (isLoading) return

`tsx
import { usePostCustomObjects } from 'co-custom-hooks';

type MyNativeCustomObjectFields = {
cpf: string;
gender: string;
}

function CreateUser() {
const { execute, isLoading } = usePostCustomObjects({
customObjectKey: "users",
postActionFn: () => console.log('SOme action you want to do after the creation'),
});

const handleSubmit = async (formData) => {
try {
const input = {
// Gets type checked by the generic passed as hook instatiation (=
custom_object_fields: { cpf: "11111111", geneder: "M" },
name: 'Matheus'
}

await execute(input);
} catch (error) {
console.error('Failed to create user:', error);
}
};

return (


`

$3

`tsx
import { usePostCustomObjects } from 'co-custom-hooks';

type FieldsThatIWantToUpdate = {
gender: string;
}

function UpdateUser() {
const { execute, isLoading } = useUpdateCustomObjects({
customObjectKey: "users",
postActionFn: () => console.log('SOme action you want to do after the update'),
});

const handleSubmit = async (formData) => {
try {
const input = {
// No need to pass all properties, since the Partial acts behind the scenes
custom_object_fields: { gender: "M" },
// Name is optional, set it if you want to update.
name: 'Matheus'
}

await execute(input);
} catch (error) {
console.error('Failed to create user:', error);
}
};

return (


`


$3

`tsx
const { data } = useQueryCustomObjects({
customObjectKey: "orders",
translateFn: (raw) => raw.map(order => ({
id: order.id,
total: order.custom_object_fields.total,
status: order.custom_object_fields.status
})),
filterCriteria: {
filter: {
$and: [
{ "custom_object_fields.status": { $eq: "pending" } },
{ "custom_object_fields.total": { $gte: 100 } }
]
}
},
refetchOnTabChange: false
});
`

$3

``tsx
type User {
id: string;
name: string;
email: string;
createdAt: Date;
}

const { data } = useQueryCustomObjects({
customObjectKey: "users",
translateFn: (raw): User[] => raw.map(item => ({
id: item.id,
name: item.custom_object_fields.name,
email: item.custom_object_fields.email,
createdAt: new Date(item.created_at)
})),
refetchOnTabChange: true
});

// data is now typed as User[] | undefined