(CREATE_TODO);
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
if (!title.trim()) return;
const input: CreateTodoInput = { title: title.trim() };
const response = await executeMutation({ input });
if (response.error) {
console.error("Failed to create todo:", response.error);
return;
}
setTitle("");
};
return (
);
}
export { CreateTodoForm };
```
**Why good:** Proper form event handling, disabled state during mutation, error handling with user feedback, input trimming prevents empty submissions
---
### Pattern 5: Conditional and Dependent Queries
Use the `pause` option to control when queries execute.
#### Implementation
```typescript
import { useQuery } from "urql";
interface UserProfileProps {
userId: string | null;
}
function UserProfile({ userId }: UserProfileProps) {
const [result] = useQuery({
query: USER_QUERY,
variables: { id: userId },
// Pause query when userId is null or empty
pause: !userId,
});
const { data, fetching, error } = result;
if (!userId) {
return Select a user to view profile
;
}
if (fetching) return ;
if (error) return ;
if (!data?.user) return ;
return ;
}
export { UserProfile };
```
**Why good:** Query pauses when userId is falsy, prevents unnecessary network requests, handles null state gracefully
---
### Pattern 6: Request Policies
Control caching behavior with request policies.
#### Request Policy Options
| Policy | Behavior | Use Case |
| ------------------- | ------------------------------------------------ | ---------------------- |
| `cache-first` | Return cached if available, else fetch (default) | Most queries |
| `cache-only` | Only return cached, never fetch | Offline-first |
| `network-only` | Always fetch, skip cache read | Critical fresh data |
| `cache-and-network` | Return cached immediately, then fetch and update | Stale-while-revalidate |
#### Implementation
```typescript
// Cache-first (default) - uses cache if available
const [result] = useQuery({
query: USERS_QUERY,
requestPolicy: "cache-first",
});
// Cache-and-network - best UX for most cases
const [result] = useQuery({
query: USERS_QUERY,
requestPolicy: "cache-and-network",
});
// Force refetch
const handleRefresh = () => {
reexecuteQuery({ requestPolicy: "network-only" });
};
```
**Why good:** Explicit policy selection based on use case, cache-and-network provides instant UI with background refresh