convex-backend PR 136: docs: Improves Remix quickstart documentation (#38719)

- Refine the Remix quickstart guide to enhance clarity, specifically regarding the creation and usage of the sample data file.

- Updates the Remix demo to use the `data` function instead of `json` from `@remix-run/react`

----

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Co-authored-by: Adebiyi Adedotun <[email protected]>
GitOrigin-RevId: dc9b126efc05429e22e9e51ebb9cde2634ab9839

Author: 2 people

npm-packages/docs/docs/quickstart/remix.mdx

@@ -52,8 +52,8 @@ Learn how to query data from Convex in a Remix app.
   </Step>
 
   <Step title="Create sample data for your database">
-    In a new terminal window, create a `sampleData.jsonl`
-    file with some sample data.
+    Create a `sampleData.jsonl` file at the root of you app
+    and fill it with the sample data given.
 
     <Snippet
       source={sampleData}
@@ -64,8 +64,8 @@ Learn how to query data from Convex in a Remix app.
 
   <Step title="Add the sample data to your database">
     Now that your project is ready, add a `tasks` table
-    with the sample data into your Convex database with
-    the `import` command.
+    with the sample data you just created in `sampleData.jsonl`
+    into your Convex database with the `import` command.
 
     ```
     npx convex import --table tasks sampleData.jsonl

npm-packages/private-demos/quickstarts/remix/app/root.tsx

@@ -1,18 +1,18 @@
 import {
+  data,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-  json,
   useLoaderData,
 } from "@remix-run/react";
 import { ConvexProvider, ConvexReactClient } from "convex/react";
 import { useState } from "react";
 
 export async function loader() {
   const CONVEX_URL = process.env["CONVEX_URL"]!;
-  return json({ ENV: { CONVEX_URL } });
+  return data({ ENV: { CONVEX_URL } });
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {