React Native Hooks
The same contract that generates your web hooks generates your mobile hooks. Your React Native engineer never rewrites fetch functions from scratch — they get production-ready, mobile-optimised hooks every time the contract updates.
What is different about mobile hooks
React Native has different networking behaviour than a browser. Invokix generates hooks that account for this automatically:
refetchOnWindowFocus: false— React Native has no window focus eventsnetworkMode: "always"— lets you handle offline states explicitly instead of silently failingretry: 2— mobile connections are less reliable, so failed requests retry before surfacing an error- No
windowordocumentreferences — fully compatible with the React Native runtime
// Auto-generated by Invokix — do not edit manually
// Contract: Orders API v1.2 — published March 5, 2025
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import type { Order, CreateOrderBody } from "@/types/orders"
const BASE_URL = "https://api.yourcompany.com"
export const orderKeys = {
all: ["orders"] as const,
list: () => [...orderKeys.all, "list"] as const,
detail: (id: string) => [...orderKeys.all, "detail", id] as const,
}
export function useGetOrders() {
return useQuery({
queryKey: orderKeys.list(),
queryFn: async (): Promise<Order[]> => {
const res = await fetch(BASE_URL + "/orders")
if (!res.ok) throw new Error("Failed to fetch orders")
return res.json()
},
refetchOnWindowFocus: false,
networkMode: "always",
retry: 2,
})
}
export function useGetOrder(orderId: string) {
return useQuery({
queryKey: orderKeys.detail(orderId),
queryFn: async (): Promise<Order> => {
const res = await fetch(BASE_URL + "/orders/" + orderId)
if (!res.ok) throw new Error("Failed to fetch order")
return res.json()
},
enabled: !!orderId,
refetchOnWindowFocus: false,
networkMode: "always",
retry: 2,
})
}
export function useCreateOrder() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (body: CreateOrderBody): Promise<Order> => {
const res = await fetch(BASE_URL + "/orders", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
})
if (!res.ok) throw new Error("Failed to create order")
return res.json()
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: orderKeys.list() })
},
networkMode: "always",
})
}Using the hooks in React Native
The hooks work identically to the web hooks — same API, same types, same cache invalidation.
import { View, Text, FlatList, TouchableOpacity } from "react-native"
import { useGetOrders, useCancelOrder } from "@/hooks/native/useOrders"
export function OrdersScreen() {
const { data: orders, isLoading, error } = useGetOrders()
const cancelOrder = useCancelOrder()
if (isLoading) return <Text>Loading...</Text>
if (error) return <Text>Something went wrong</Text>
return (
<FlatList
data={orders}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<OrderCard
order={item}
onCancel={() => cancelOrder.mutate(item.id)}
/>
)}
/>
)
}Handling offline states
Because networkMode: "always" is set, React Native hooks will attempt fetches even when offline and surface the error to your component rather than silently doing nothing. This lets you build proper offline UI.
import { useGetOrders } from "@/hooks/native/useOrders"
export function useOrdersWithOffline() {
const query = useGetOrders()
return {
...query,
isOffline: query.isError && !query.isFetching,
}
}Requirements
React Query v5 for React Native:
pnpm add @tanstack/react-queryWrap your app root in a QueryClientProvider — same as the web setup.