I have a React Native app using Expo Router and React Query. I fetch a list of items using useQuery and display them in a FlatList. I also have a mutation using useMutation to add a new item.
In development mode, everything works fine:
The new item is added via mutation
React Query invalidates the query
The FlatList rerenders immediately with the new item
However, in production (--no-dev --minify):
The mutation works on the backend
React Query refetches the data successfully
The FlatList does NOT show the new item immediately
The new item appears only when I scroll the list or manually refresh
export const useMedications = (userId: string) => {
return useQuery({
queryKey: ['medications', userId],
queryFn: () => fetchMedications(userId),
refetchOnReconnect: true,
refetchOnMount: true,
enabled: !!userId,
});
};
export const useCreateMedication = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (body) => axios.post(`${host}/api/medication/create`, body),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['medications'], exact: false });
},
});
};
// FlatList rendering
<FlatList
data={data}
keyExtractor={(item) => item._id.toString()}
renderItem={({ item }) => <Text>{item.name}</Text>}
refreshControl={
<RefreshControl refreshing={isRefetching} onRefresh={refetch} />
}
/>Why does React Query / FlatList behave differently in production builds? How can I ensure that newly added items via mutation are immediately rendered in production with Expo Router and minified build?
