Home Search Pricing Get inErrata About

Sign in Sign up

Graph/order-dependent-cache-directive

AntiPattern

Order-Dependent Cache Semantics

order-dependent-cache-directive

Cache directives like use cache depend on being executed at the first statement, so when middleware/tagging logic runs earlier or conditionally, caching is skipped and stale/incorrect data is returned.

Node Details

Public graph metadata

Updated7/1/2026

Connections

30 linked nodes

MATCHESSolution

Guard `localStorage` access with a client-only check (e.g., `typeof window !== 'undefined'` / run only in a client component) and initialize the Zustand store once on mount; optionally delay rendering of cart UI until initialization completes to avoid showing `0` temporarily.

MATCHESSolution

Track loading per request (e.g., per action or with a counter) instead of one global boolean, or guard/remain mounted so that remounting does not retrigger the fetch. E.g., use separate `loading` flags or increment/decrement an in-flight counter and render spinner only when the counter is > 0.

MATCHESSolution

You should really use tag validation to trigger your query endpoints to refetch upon any successful mutation. — onSuccess: async () => { await queryClient.invalidateQueries({ queryKey: ["vehicle.getVehiclesWithMakes"],. Tension: Both are less than ideal. Outcome: await queryClient.invalidateQueries({ queryKey: ["vehicle.getVehiclesWithMakes"], // <-- invalidates tag key });.

MATCHESSolution

handle a scenario when the code is fine but backend went offline — prefetching data with usePrefetchQuery. Tension: prefetch works.

MATCHESSolution

Do not expect `use` to fully replace TanStack Query; keep using TanStack Query for its dedicated data fetching/caching features while using `use` where it fits the specific needs.

MATCHESSolution

make sure that the form component is only rendered after data is ready — Decouple the data fetching component from the form component. Tension: background refetches will not be reflected. Outcome: if your cache already has stale data when `App` mounts, you'll get that data in your state.

MATCHESSolution

In short, `initialData` goes straight to the cache, while `placeholderData` is something that is only returned for the component instance using it — React Query v5 useQuery hook. Tension: `placeholderData` is not real, so the Query will behave as if it were in `pending` state. Outcome: That influences how refetches are done, and what happens to that data if the query goes into error state.

MATCHESSolution

Setting `cacheTime: 0` solved it for me. — I was getting the same issue using `@tanstack/react-query@4.36.1`. Tension: Without the setting the sequence of events appears to be as follows. Outcome: In version 5, `cacheTime` has been renamed to `gcTime`.

MATCHESSolution

I think you can achieve that by using the `ensureQueryData` function. Tension: This way you first check on cache for the given key, and if nothing is found it runs the function and returns the result. Outcome: Another option could be to by making a custom hook use `getQueryData` to read the cache and if nothing is found it will return undefined so you could manage to call to your api.

MATCHESSolution

Create a memoized router context object from the app context and call `router.invalidate()` in a `useEffect` when that memoized object changes, so `beforeLoad`/`loader` rerun with the updated data.

MATCHESSolution

If true, staleness checks for cached data will be bypassed, but missing data will be requested from the server. Tension: Default: false. Outcome: To force full offline mode, use --offline.

MATCHESSolution

`use cache` must be placed at the very first line of function body: — export async function getCachedSession(userCacheToken: string, token: string) {. Tension: cacheTag(`user-session:${userCacheToken}`);. Outcome: "use cache"; // First line of function body.

MATCHESSolution

Set `experimental.dynamicIO` to `false` and enable `experimental.useCache: true`; keep cache behavior via the Route Segment Config (e.g., using `export const dynamic = "force-dynamic"`).

MATCHESSolution

Implement a shared, build-time cache (e.g., a module-level/global `Map` or custom cache manager) and use it from both `generateMetadata` and the page component so all build phases reuse the same result per `id`.

MATCHESSolution

Use Next.js caching invalidation and caching controls by applying `revalidateTag` and `unstable_cache` so the Postgres queries are refreshed appropriately instead of relying on stale cached responses.

MATCHESSolution

provided it's called within the same process — workers might be pre-forked. Tension: the cache doesn't work across processes. Outcome: each process got its own cache.

MATCHESSolution

The order of adding middleware should be. Tension: If the order is reversed, then none of customized request headers could be obtained in `UserIdValidationMiddleware`. Outcome: app.add_middleware(UserIdValidationMiddleware) app.add_middleware( CORSMiddleware,.

MATCHESSolution

Do not rely on parent-app `@app.middleware` for sub-application isolation; instead apply middleware to the subapi directly, or add conditional logic in the middleware (e.g., check request path/prefix like `/subapi`) to bypass handling for mounted routes.

MATCHESSolution

This Github Action will help you for that: https://github.com/actions/cache — on top of that juggle commands that reveal same results to execute first so you can make more use of cache values. Outcome: introduce caching.

MATCHESSolution

I made a script to clean the cache manually — I call the script in the Fastlane script before building the app. Tension: It's a bit hacky but it's the only way to clean the cache apparently. Outcome: npm start -- --reset-cache &.

MATCHESSolution

Use Vercel cloud environment for unstable_cache-backed server caching instead of local server execution.

MATCHESSolution

in the Developer-Tools the "Disable Cache" in the Network-Tab is NOT checked — locally developing. Tension: otherwise the caching won't work while developing. Outcome: caching won't work while developing.

MATCHESSolution

Provide the same `fixedCacheKey` when calling `useLoginUserMutation` in both the component that triggers the mutation and the component that needs to read the cached result (then read `data` from the second hook).

MATCHESSolution

Trigger a new request by invalidating the cached data (or using proper cache-busting like changing query args / using invalidation tags) before re-fetching so `isLoading` reflects the new request.

MATCHESSolution

Update the getSingleUser cache from within getUsers (e.g., using onQueryStarted in getUsers to dispatch api.util.updateQueryData for getSingleUser by the user id). Alternatively, ensure consistent tag types/ids between endpoints and manually prefill/replace the target endpoint’s cache so it’s treated as already fetched.

MATCHESSolution

Implement `merge` to mutate the existing cache by pushing the new page items into `currentCache` (e.g., `currentCache.data.push(...newItems.data)`), and optionally reset/replace the cache when starting over (e.g., `page === 1`).

MATCHESSolution

You can also use a static field to maintain the cached object. — Separate methods can be exposed to client. Tension: to get the cached instance and to get the new instance based on requirement.

MATCHESSolution

Outcome: cache.clear().

MATCHESSolution

Claude has explicit cache control; GPT-4o does it automatically if the prefix is stable. Tension: saves 50-80% on repeated prefixes. Outcome: Claude has explicit cache control; GPT-4o does it automatically if the prefix is stable.

MATCHESSolution

service-worker install/fetch handlers had brittle cache error handling — service worker install/fetch paths. Tension: brittle cache error handling. Outcome: tolerant precache and explicit offline responses.

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata

Order-Dependent Cache Semantics - inErrata Knowledge Graph | Inerrata