-
Notifications
You must be signed in to change notification settings - Fork 293
(docs: nextjs QS) fix incorrect title; update convexclientprovider explanation #60
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -48,7 +48,7 @@ Alternatively see the | |||||
version of this quickstart. | ||||||
|
||||||
<StepByStep> | ||||||
<Step title="Create a React app"> | ||||||
<Step title="Create a Next.js app"> | ||||||
Create a Next.js app using the `npx create-next-app` command. | ||||||
|
||||||
Choose the default option for every prompt (hit Enter). | ||||||
|
@@ -66,8 +66,8 @@ version of this quickstart. | |||||
</Step> | ||||||
<Step title="Install the Convex client and server library"> | ||||||
To get started, install the `convex` | ||||||
package which provides a convenient interface for working | ||||||
with Convex from a React app. | ||||||
package, which provides a convenient interface for working | ||||||
with Convex. | ||||||
|
||||||
Navigate to your app and install `convex`. | ||||||
|
||||||
|
@@ -106,9 +106,7 @@ version of this quickstart. | |||||
</Step> | ||||||
|
||||||
<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. | ||||||
Use the [`import`](/database/import-export/import) command to add a `tasks` table with the sample data into your Convex database. | ||||||
|
||||||
``` | ||||||
npx convex import --table tasks sampleData.jsonl | ||||||
|
@@ -117,12 +115,11 @@ version of this quickstart. | |||||
</Step> | ||||||
|
||||||
<Step title="Expose a database query"> | ||||||
Add a new file <JSDialectFileName name="tasks.ts" /> in the `convex/` folder | ||||||
with a query function that loads the data. | ||||||
In the `convex/` folder, add a new file <JSDialectFileName name="tasks.ts" /> with a query function that loads the data. | ||||||
|
||||||
Exporting a query function from this file | ||||||
declares an API function named after the file | ||||||
and the export name, `api.tasks.get`. | ||||||
and the export name: `api.tasks.get`. | ||||||
|
||||||
<TSAndJSSnippet | ||||||
sourceTS={tasks} | ||||||
|
@@ -133,8 +130,9 @@ version of this quickstart. | |||||
</Step> | ||||||
|
||||||
<Step title="Create a client component for the Convex provider"> | ||||||
Add a new file <JSDialectFileName name="ConvexClientProvider.tsx" /> in the `app/` folder. Include the `"use client";` directive, create a | ||||||
`ConvexReactClient` and a component that wraps its children in a `ConvexProvider`. | ||||||
For `<ConvexProvider>` to work on the client, `<ConvexReactClient>` must be passed to it. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
In the `app/` folder, add a new file <JSDialectFileName name="ConvexClientProvider.tsx" /> with the following code. This creates a component that wraps `<ConvexProvider>` and passes it the `<ConvexReactClient>`. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
<TSAndJSSnippet | ||||||
sourceTS={ConvexClientProvider} | ||||||
|
@@ -145,7 +143,7 @@ version of this quickstart. | |||||
</Step> | ||||||
|
||||||
<Step title="Wire up the ConvexClientProvider"> | ||||||
In <JSDialectFileName name="app/layout.tsx" ext="js" />, wrap the children of the `body` element with the `ConvexClientProvider`. | ||||||
In <JSDialectFileName name="app/layout.tsx" ext="js" />, wrap the children of the `body` element with the `<ConvexClientProvider>`. | ||||||
|
||||||
<TSAndJSSnippet | ||||||
sourceTS={layout} | ||||||
|
@@ -158,7 +156,7 @@ version of this quickstart. | |||||
</Step> | ||||||
|
||||||
<Step title="Display the data in your app"> | ||||||
In <JSDialectFileName name="app/page.tsx" ext="js" />, use the `useQuery` hook to fetch from your `api.tasks.get` | ||||||
In <JSDialectFileName name="app/page.tsx" ext="js" />, use the `useQuery()` hook to fetch from your `api.tasks.get` | ||||||
API function. | ||||||
|
||||||
<TSAndJSSnippet | ||||||
|
@@ -172,7 +170,7 @@ version of this quickstart. | |||||
</Step> | ||||||
|
||||||
<Step title="Start the app"> | ||||||
Start the app, open [http://localhost:3000](http://localhost:3000) in a browser, | ||||||
Run your development server, open [http://localhost:3000](http://localhost:3000) in a browser, | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. since "development server" is an overloaded term in convex I'll add "Next.js" or "frontend" here |
||||||
and see the list of tasks. | ||||||
|
||||||
```sh | ||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
agree "from a React app" wasn't very useful, and now the rest doesn't seem useful either IMO