From dae8c642b84f11f44fdb71b16a8f39c3accce3d6 Mon Sep 17 00:00:00 2001
From: Adebiyi Adedotun <hey@orangeman.dev>
Date: Thu, 3 Jul 2025 00:26:10 +0100
Subject: [PATCH] docs: Improves Remix quickstart documentation

- 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`
---
 npm-packages/docs/docs/quickstart/remix.mdx               | 8 ++++----
 npm-packages/private-demos/quickstarts/remix/app/root.tsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/npm-packages/docs/docs/quickstart/remix.mdx b/npm-packages/docs/docs/quickstart/remix.mdx
index f1f14efab..f3f38dcfa 100644
--- a/npm-packages/docs/docs/quickstart/remix.mdx
+++ b/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
diff --git a/npm-packages/private-demos/quickstarts/remix/app/root.tsx b/npm-packages/private-demos/quickstarts/remix/app/root.tsx
index e71e743f3..0844bfc8f 100644
--- a/npm-packages/private-demos/quickstarts/remix/app/root.tsx
+++ b/npm-packages/private-demos/quickstarts/remix/app/root.tsx
@@ -1,10 +1,10 @@
 import {
+  data,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-  json,
   useLoaderData,
 } from "@remix-run/react";
 import { ConvexProvider, ConvexReactClient } from "convex/react";
@@ -12,7 +12,7 @@ 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 }) {