Update docs to use json() in client loaders/actions for proper type i…

…nference

docs/guides/client-data.md

@@ -41,7 +41,7 @@ export async function clientLoader({
   request,
 }: ClientLoaderFunctionArgs) {
   const data = await fetchApiFromClient({ request }); // (2)
-  return data;
+  return json(data);
 }
 ```
 
@@ -76,10 +76,10 @@ export async function clientLoader({
     serverLoader(),
     getClientData(request),
   ]);
-  return {
+  return json({
     ...serverData, // (4)
     ...clientData, // (4)
-  };
+  });
 }
 clientLoader.hydrate = true; // (3)
 
@@ -129,10 +129,10 @@ export async function clientLoader({
     serverLoader(),
     getClientData(request),
   ]);
-  return {
+  return json({
     ...serverData, // (4)
     ...clientData, // (4)
-  };
+  });
 }
 // Note: you do not have to set this explicitly - it is implied if there is no `loader`
 clientLoader.hydrate = true;
@@ -195,17 +195,17 @@ export async function clientLoader({
     isInitialRequest = false;
     const serverData = await serverLoader();
     cache.set(cacheKey, serverData); // (2)
-    return serverData;
+    return json(serverData);
   }
 
   const cachedData = await cache.get(cacheKey);
   if (cachedData) {
-    return cachedData; // (3)
+    return json(cachedData); // (3)
   }
 
   const serverData = await serverLoader();
   cache.set(cacheKey, serverData);
-  return serverData;
+  return json(serverData);
 }
 clientLoader.hydrate = true; // (2)
 
@@ -216,7 +216,7 @@ export async function clientAction({
   const cacheKey = generateKey(request);
   cache.delete(cacheKey); // (4)
   const serverData = await serverAction();
-  return serverData;
+  return json(serverData);
 }
 ```
 

docs/route/client-action.md

@@ -16,7 +16,7 @@ export const clientAction = async ({
 }: ClientActionFunctionArgs) => {
   invalidateClientSideCache();
   const data = await serverAction();
-  return data;
+  return json(data);
 };
 ```
 

docs/route/client-loader.md

@@ -19,7 +19,7 @@ export const clientLoader = async ({
   // And/or fetch data on the client
   const data = getDataFromClient();
   // Return the data to expose through useLoaderData()
-  return data;
+  return json(data);
 };
 ```
 
@@ -47,7 +47,7 @@ export async function loader() {
 export async function clientLoader() {
   // During client-side navigations, we hit our exposed API endpoints directly
   const data = await fetchDataFromApi();
-  return data;
+  return json(data);
 }
 
 export default function Component() {