I am updating my language settings through a C# Controller in .NET 10 which is for my back-end and my frontend is made with React 18.3.1. Furthermore, the web app is a hybrid app in which we want to migrate slowly to React 18.3.1 for the frontend instead of .NET Razor pages. What would be the wiser in order to clear my cache so the new translated texts appear correctly on the first time whenever I save the new language?

This is my C# code:

 [HttpGet]
 [Authorize(Roles = "Admin,User,Auditor,DepartmentHead")]
 [Route("/react/api/settings/get-lang-resources")]
 public IActionResult GetLanguageResources()
 {
     try
     {
         // from here I am getting the saved user language
         var languageId = UserHelper.GetUserLanguage(User);
         // the identifier is for telling the GET request to fetch the resources where context == 'SettingsNew' from my SQL db and the identifier also contains Language as a string
         var res = _context.Resources.AsNoTracking()
                .Where(r => r.Context == "SettingsNew" && r!.Identifier.Contains("Language") && r.LanguageId == languageId)
                .Select(r => new {
                         r.Identifier, r.Value 
                     } 
                ).ToList();

         if(res == null)
         {
             return StatusCode(500, "An error occured fetching texts from Database.");
         }else
         {
             return Ok(res);
         }

     } catch(Exception ex)
     {
         _logger.LogError(ex, "Can't fetch texts.");
         return StatusCode(500, "An error occured fetching texts from Database.");
     }
 }

If I logout and log in, it will fetch correctly the language. The thing is that whenever I am inside the application, it won't do it correctly and some of the interface will refresh and the rest will remain in the older language.

Here is the function in Typescript with which I save the new language:

const handleSave = async () => {
 const newLanguage = selectedLanguage;
 toast.loading("Saving language preferences...");

 mutate(newLanguage, {
     onSuccess: async (response) => {
         toast.dismiss();
         // Wait a moment for server to process
         await new Promise(resolve => setTimeout(resolve, 200));

         // Manually refetch to get updated data
         const result = await refetch();
         toast.success("Language preferences saved successfully");

         // Update i18n immediately for UI
         i18n.changeLanguage(newLanguage.toLowerCase());
         parent.document.location.reload();
     },
     onError: (error) => {
         toast.dismiss();
         console.error("❌ Failed to save language:", error);
         toast.error("Failed to save language preferences. Please try again.");

         // Revert i18n on error
         const originalLanguage = language?.code?.toLowerCase() || 'en';
         i18n.changeLanguage(originalLanguage);
     },
 });
};

Here is the exported function of my hook which updates the language settings and is located inside my hooks folder. Creates a mutation for updating the user's language setting.

 export function useUpdateLanguageSettings() {
   const queryClient = useQueryClient();

   const mutation = useMutation({
   mutationFn: updateLanguageSettings,
      onSuccess: async () => {
        await new Promise(resolve => setTimeout(resolve, 150));
        await queryClient.refetchQueries({ queryKey: ['get-language'] });
      },
  });

  return {
    mutate: mutation.mutate,
    // Also expose mutateAsync so callers can await the mutation
    mutateAsync: mutation.mutateAsync,
    isPending: mutation.isPending,
    error: mutation.error,
  };
 }

Lastly, here is the function which binds the hook with the rest of the interface payload. Updates the language settings for the user.

export async function updateLanguageSettings(languageCode: string):             Promise {
   const response = await fetch(apiUrl('/react/api/settings/update-language'), {
       method: 'POST',
       credentials: 'include',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ code: languageCode } as LanguageUpdateRequest),
    });
if (!response.ok) {
   throw new Error(Language update failed: ${response.status});
}
   return response.json();
}

I don't think the problem lies in my React code. I think the problem liew somewhere with my C# controller which should refetch with a fresh GET request the new languageId which corresponds to my new updated language. Any advice would be welcome. Thanks you.