The cache is destroyed.

[ghost]

  const { data: userResponse, mutate: userMutate, error: userError, isLoading: userIsLoading } = useSWR(item ? `/api/users/${item.user_id}` : null, fetcher);
  const { data: userData, error: userParseError, isLoading: userParseIsLoading } = useSWR(userResponse?.ok ? userResponse : null, parser);
  const { data: user, mutate: userValidationMutate, error: userValidationError, isLoading: userValidationIsLoading } = useSWR(userData?.success ? userData.data : null, UserSchema.parseAsync);

I first use Fetcher (The fetch() function) to get a Response object from API Routes.
Then, when the Fetch's Response status code is greater than or equal to 200 and less than 300, use Parser (Response.json() function) to do a JSON Parse of the Response.
Finally, the resulting Object is parsed by Zod's Async Parse.

At this time, mutating the result of the last SWR (Zod Async Parse) will leave user with the old data because the very first Response is in the cache.
So if you mutate the result of the first SWR (The fetch() function), Parser and Async Parse will discard their cache, the variables userData and user will be undefined, and isLoading will be true.
Therefore, because isLoading becomes true again when mutate is executed, the loading screen is displayed on the screen and the user experience is severely damaged.

I want the behavior to be reflected immediately using initial data against mutates in Async Parse, and then mutate against Fetcher and revalidate against API Routes.
I use the results of both Response.status and Async Parse, so if I were to combine them into a single function, I would lose access to the Response object.

userMutate();

// Result: //
// userResponse: Response
// userData: undefined
// user: undefined
// userResponse: Response
// userData: Object
// user: Object

// Desired Result: //
// userResponse: Response
// userData: Object (cache)
// user: Object (cache)
// userResponse: Response
// userData: Object
// user: Object