From 0918968f8a047ca6e0c7dd2f26551a46ef118da1 Mon Sep 17 00:00:00 2001
From: Konrad Kalemba <konrad_kal@hotmail.com>
Date: Mon, 9 May 2022 22:53:00 +0200
Subject: [PATCH] docs(guides/data-loading): fix type inference example (#3144)

* docs(guides/data-loading): correct type inference code example

* chore: update contributors.yml
---
 contributors.yml            |  1 +
 docs/guides/data-loading.md | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/contributors.yml b/contributors.yml
index 0ea8b1b3c7a..0714a2777af 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -181,6 +181,7 @@
 - kimdontdoit
 - klauspaiva
 - knowler
+- konradkalemba
 - kubaprzetakiewicz
 - kuldar
 - kumard3
diff --git a/docs/guides/data-loading.md b/docs/guides/data-loading.md
index f1f43b50438..d3a650c5d41 100644
--- a/docs/guides/data-loading.md
+++ b/docs/guides/data-loading.md
@@ -186,6 +186,7 @@ export default function ProductCategory() {
 If you are using TypeScript, you can use type inference to use Prisma Client generated types on when calling `useLoaderData`. This allows better type safety and intellisense when writing your code that uses the loaded data.
 
 ```tsx filename=tsx filename=app/routes/products/$productId.tsx
+import type { LoaderFunction } from "@remix-run/node"; // or "@remix-run/cloudflare"
 import { json } from "@remix-run/node"; // or "@remix-run/cloudflare"
 import { useLoaderData } from "@remix-run/react";
 
@@ -193,19 +194,27 @@ import { db } from "~/db.server";
 
 type LoaderData = Awaited<ReturnType<typeof getLoaderData>>;
 
-async function getLoaderData() {
-  const products = await db.product.findMany({
+async function getLoaderData(productId: string) {
+  const product = await db.product.findUnique({
+    where: {
+      id: productId,
+    },
     select: {
       id: true,
       name: true,
       imgSrc: true,
     },
   });
-  return { products };
+
+  return product;
 }
 
-export const loader = async () => {
-  return json<LoaderData>(await getLoaderData());
+export const loader: LoaderFunction = async ({
+  params,
+}) => {
+  return json<LoaderData>(
+    await getLoaderData(params.productId)
+  );
 };
 
 export default function Product() {