Skip to content
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.

Sign up for GitHub

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

Recommended changes to getting started guide #228

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Recommended changes to getting started guide #228

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
926a23a
recommended changes to getting started guide
boazsender Oct 2, 2023
2e0232f
clarify that mutations should not be sent to the client
boazsender Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions apps/web/app/routes/get-started.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,8 +231,10 @@ export default function Component() {
<p>
Compose a zod schema that will be used in your action, mutation
function, form generation, server-side validation, and client-side
validation.
validation. You can either do this in a route where you'll be submitting
a form or somewhere in your app directory of your choosing, like:
</p>
<Pre>/app/schemas/schemaName.ts</Pre>
<Code>{schemaCode}</Code>
<SubHeading>Create your mutation</SubHeading>
<p>
Expand All @@ -247,17 +249,33 @@ export default function Component() {
<p>
Domain Functions will parse the request&apos;s <em>formData</em> and
perform the mutation only if everything is valid. If something goes bad,
it will return structured error messages for us.
it will return structured error messages for us. We typically use
mutations in our actions, which we'll set up in the next step. You don't
want your mutation to be sent to the client since it will usually have
server side code, so you can choose to put them in a separate file like
</p>
<Pre>/app/domain/some-domain.ts</Pre>
<p>
and import the domain for use in your action, or write your mutation
inline in the <em>formAction</em> in the following step.
</p>
<Code>{mutationCode}</Code>
<SubHeading>Create your action</SubHeading>
<p>
Create an action in the route where you'll be submitting a form, and
return a <em>formAction</em> from it.
</p>
<p>
If the mutation is successful, <em>formAction</em> will redirect to{' '}
<em>successPath</em>. If not, it will return <em>errors</em> and{' '}
<em>values</em> to pass to <em>Form</em>.
</p>
<Code>{actionCode}</Code>
<SubHeading>Create a basic form</SubHeading>
<p>
Now it's time to head down into the component and return a <em>Form</em>
.
</p>
<p>
If you don&apos;t want any custom UI in the form, you can render{' '}
<em>Form</em> without <em>children</em> and it will generate all the
Expand Down