',
- 'X-Custom-Header': 'value',
},
});
```
-#### 2. Update Headers at Runtime
-
-```tsx
-import { configure } from './generated/hooks';
-
-// After login, update the authorization header
-function handleLoginSuccess(token: string) {
- configure({
- endpoint: 'https://api.example.com/graphql',
- headers: {
- Authorization: `Bearer ${token}`,
- },
- });
-}
-```
-
### Table Query Hooks
For each table, two query hooks are generated:
-#### List Query (`use{Table}sQuery`)
-
-Fetches multiple records with pagination, filtering, and ordering:
-
```tsx
-import { useCarsQuery } from './generated/hooks';
+import { useCarsQuery, useCarQuery } from './generated/hooks';
+// List query with filtering, pagination, and ordering
function CarList() {
- const { data, isLoading, isError, error, refetch, isFetching } = useCarsQuery(
- {
- // Pagination
- first: 10, // First N records
- // last: 10, // Last N records
- // after: 'cursor', // Cursor-based pagination
- // before: 'cursor',
- // offset: 20, // Offset pagination
-
- // Filtering
- filter: {
- brand: { equalTo: 'Tesla' },
- price: { greaterThan: 50000 },
- },
-
- // Ordering
- orderBy: ['CREATED_AT_DESC', 'NAME_ASC'],
- }
- );
+ const { data, isLoading, isError, error } = useCarsQuery({
+ first: 10,
+ filter: {
+ brand: { equalTo: 'Tesla' },
+ price: { greaterThan: 50000 },
+ },
+ orderBy: ['CREATED_AT_DESC'],
+ });
if (isLoading) return Loading...
;
if (isError) return Error: {error.message}
;
return (
-
-
Total: {data?.cars.totalCount}
-
- {data?.cars.nodes.map((car) => (
- -
- {car.brand} - ${car.price}
-
- ))}
-
-
- {/* Pagination info */}
- {data?.cars.pageInfo.hasNextPage && (
-
- )}
-
+ {data?.cars.nodes.map((car) => (
+ - {car.brand} - ${car.price}
+ ))}
+
);
}
-```
-
-#### Single Item Query (`use{Table}Query`)
-
-Fetches a single record by ID:
-
-```tsx
-import { useCarQuery } from './generated/hooks';
+// Single item query by ID
function CarDetails({ carId }: { carId: string }) {
- const { data, isLoading, isError } = useCarQuery({
- id: carId,
- });
+ const { data, isLoading } = useCarQuery({ id: carId });
if (isLoading) return Loading...
;
- if (isError) return Car not found
;
return (
{data?.car?.brand}
Price: ${data?.car?.price}
-
Created: {data?.car?.createdAt}
);
}
@@ -420,1472 +326,421 @@ function CarDetails({ carId }: { carId: string }) {
For each table, three mutation hooks are generated:
-#### Create Mutation (`useCreate{Table}Mutation`)
-
```tsx
-import { useCreateCarMutation } from './generated/hooks';
+import {
+ useCreateCarMutation,
+ useUpdateCarMutation,
+ useDeleteCarMutation,
+} from './generated/hooks';
-function CreateCarForm() {
+function CarForm() {
const createCar = useCreateCarMutation({
onSuccess: (data) => {
console.log('Created car:', data.createCar.car.id);
- // Invalidate queries, redirect, show toast, etc.
- },
- onError: (error) => {
- console.error('Failed to create car:', error);
- },
- });
-
- const handleSubmit = (formData: { brand: string; price: number }) => {
- createCar.mutate({
- input: {
- car: {
- brand: formData.brand,
- price: formData.price,
- },
- },
- });
- };
-
- return (
-
- );
-}
-```
-
-#### Update Mutation (`useUpdate{Table}Mutation`)
-
-```tsx
-import { useUpdateCarMutation } from './generated/hooks';
-
-function EditCarForm({
- carId,
- currentBrand,
-}: {
- carId: string;
- currentBrand: string;
-}) {
- const updateCar = useUpdateCarMutation({
- onSuccess: (data) => {
- console.log('Updated car:', data.updateCar.car.brand);
- },
- });
-
- const handleUpdate = (newBrand: string) => {
- updateCar.mutate({
- input: {
- id: carId,
- patch: {
- brand: newBrand,
- },
- },
- });
- };
-
- return (
-
- );
-}
-```
-
-#### Delete Mutation (`useDelete{Table}Mutation`)
-
-```tsx
-import { useDeleteCarMutation } from './generated/hooks';
-
-function DeleteCarButton({ carId }: { carId: string }) {
- const deleteCar = useDeleteCarMutation({
- onSuccess: () => {
- console.log('Car deleted');
- // Navigate away, refetch list, etc.
},
});
return (
);
}
```
-### Custom Query Hooks
+### Custom Query and Mutation Hooks
-Custom queries from your schema (like `currentUser`, `nodeById`, etc.) get their own hooks:
+Custom queries and mutations from your schema get their own hooks:
```tsx
-import { useCurrentUserQuery, useNodeByIdQuery } from './generated/hooks';
+import { useCurrentUserQuery, useLoginMutation } from './generated/hooks';
-// Simple custom query
function UserProfile() {
- const { data, isLoading } = useCurrentUserQuery();
-
- if (isLoading) return Loading...
;
- if (!data?.currentUser) return Not logged in
;
-
- return (
-
-
Welcome, {data.currentUser.username}
-
Email: {data.currentUser.email}
-
{JSON.stringify(data?.node, null, 2)};
+ const { data } = useCurrentUserQuery();
+ return Welcome, {data?.currentUser?.username}
;
}
-```
-
-### Custom Mutation Hooks
-Custom mutations (like `login`, `register`, `logout`) get dedicated hooks:
-
-```tsx
-import {
- useLoginMutation,
- useRegisterMutation,
- useLogoutMutation,
- useForgotPasswordMutation,
-} from './generated/hooks';
-
-// Login
function LoginForm() {
const login = useLoginMutation({
onSuccess: (data) => {
const token = data.login.apiToken?.accessToken;
- if (token) {
- localStorage.setItem('token', token);
- // Reconfigure client with new token
- configure({
- endpoint: 'https://api.example.com/graphql',
- headers: { Authorization: `Bearer ${token}` },
- });
- }
- },
- onError: (error) => {
- alert('Login failed: ' + error.message);
- },
- });
-
- const handleLogin = (email: string, password: string) => {
- login.mutate({
- input: { email, password },
- });
- };
-
- return (
-
- );
-}
-
-// Register
-function RegisterForm() {
- const register = useRegisterMutation({
- onSuccess: () => {
- alert('Registration successful! Please check your email.');
+ if (token) localStorage.setItem('token', token);
},
});
- const handleRegister = (data: {
- email: string;
- password: string;
- username: string;
- }) => {
- register.mutate({
- input: {
- email: data.email,
- password: data.password,
- username: data.username,
- },
- });
- };
-
return (
- 