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

docs: jokes app tutorial in fetching jokes part #3547

Merged
merged 9 commits into from
Jul 5, 2022
Merged

docs: jokes app tutorial in fetching jokes part #3547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9bca495
Update jokes tutorial User > Joke
justinsalasdev Jun 23, 2022
60b8fb3
Update contributors.yml
justinsalasdev Jun 23, 2022
0f0eae9
Update jokes.md
justinsalasdev Jun 23, 2022
0d7048e
Update jokes.md
justinsalasdev Jun 23, 2022
e7b509b
Update jokes.md
justinsalasdev Jun 23, 2022
78c58e9
Merge branch 'remix-run:main' into patch-1
justinsalasdev Jun 25, 2022
0be1a30
Update jokes.md
justinsalasdev Jun 25, 2022
0d006e9
Update jokes.md
justinsalasdev Jun 25, 2022
8168b2c
Update jokes.md
justinsalasdev Jun 25, 2022
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
1 change: 1 addition & 0 deletions contributors.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,3 +377,4 @@
- zachdtaylor
- zainfathoni
- zhe
- justinsalasdev
24 changes: 14 additions & 10 deletions docs/tutorials/jokes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1581,25 +1581,25 @@ To _load_ data in a Remix route module, you use a [`loader`][loader]. This is si
import type { LoaderFunction } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import type { User } from "@prisma/client";
import type { Sandwich } from "@prisma/client";

import { db } from "~/utils/db.server";

type LoaderData = { users: Array<User> };
type LoaderData = { sandwiches: Array<Sandwich> };

export const loader: LoaderFunction = async () => {
const data: LoaderData = {
users: await db.user.findMany(),
sandwiches: await db.sandwich.findMany(),
};
return json(data);
};

export default function Users() {
export default function Sandwiches() {
const data = useLoaderData<LoaderData>();
return (
<ul>
{data.users.map((user) => (
<li key={user.id}>{user.name}</li>
{data.sandwiches.map((sandwich) => (
<li key={sandwich.id}>{sandwich.name}</li>
))}
</ul>
);
Expand All @@ -1620,27 +1620,31 @@ Remix and the `tsconfig.json` you get from the starter template are configured t

<summary>app/routes/jokes.tsx</summary>

```tsx filename=app/routes/jokes.tsx lines=[3,5,12,19-21,23-28,31,55-59]
```tsx filename=app/routes/jokes.tsx lines=[3,6,8,16,23-25,27-32,35,59-63]
import type {
LinksFunction,
LoaderFunction,
} from "@remix-run/node";

import type { Joke } from "@prisma/client";

import { json } from "@remix-run/node";

import {
Link,
Outlet,
useLoaderData,
} from "@remix-run/react";

import { db } from "~/utils/db.server";
import { db } from "~/utils/db.server";
import stylesUrl from "~/styles/jokes.css";

export const links: LinksFunction = () => {
return [{ rel: "stylesheet", href: stylesUrl }];
};

type LoaderData = {
jokeListItems: Array<{ id: string; name: string }>;
jokeListItems: Array<Joke>;
};

export const loader: LoaderFunction = async () => {
Expand Down Expand Up @@ -1705,7 +1709,7 @@ And here's what we have with that now:

I want to call out something specific in my solution. Here's my loader:

```tsx lines=[8-10]
```tsx lines=[2,8-10]
type LoaderData = {
jokeListItems: Array<{ id: string; name: string }>;
};
Expand Down