feat: error handling - partial data

.github/workflows/learn-github-actions.yml

@@ -12,6 +12,11 @@ jobs:
       - run: npm install
       - run: npm run lint
       - run: npm run dev &
-      - run: sleep 15
+      - run: |
+          echo "I'm waiting for server..."
+          while ! curl --output /dev/null --silent --head --fail http://localhost:3000; do
+            printf '.'
+            sleep 5
+          done
       - run: npm run codegen
       - run: npm run build

src/components/layouts/MainNav.tsx

@@ -18,6 +18,7 @@ const ROUTES = {
   SCROLL_OFFSET_PAGINATION: "/scroll-offset-pagination",
   CURSOR_PAGINATION: "/cursor-pagination",
   OPTIMISTIC_UI: "/optimistic-ui",
+  ERROR_HANDLING: "/error-handling",
 };
 
 const MainNav = () => {
@@ -44,6 +45,11 @@ const MainNav = () => {
                 Mutation - Optimistic UI
               </NavigationMenuLink>
             </Link>
+            <Link href={ROUTES.ERROR_HANDLING} legacyBehavior passHref>
+              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                Error handling
+              </NavigationMenuLink>
+            </Link>
           </NavigationMenuContent>
         </NavigationMenuItem>
         <NavigationMenuItem>

src/graphql/query/getErrorWithData.gql

@@ -0,0 +1,10 @@
+query getErrorWithData {
+  getProducts {
+    name
+    price
+  }
+  deals {
+    id
+    title
+  }
+}

src/graphql/schema/deals/deals.resolver.ts

@@ -8,6 +8,7 @@ import {
   DealsResponse,
 } from "./deals";
 import { count, eq, gt } from "drizzle-orm";
+import { GraphQLError } from "graphql";
 
 @Resolver(Deal)
 export class DealResolver {
@@ -129,6 +130,7 @@ export class DealResolver {
       .delete(dbDeals)
       .where(eq(dbDeals.id, id))
       .returning({ deletedId: dbDeals.id });
+
     return deletedUserIds[0];
   }
 }

src/graphql/schema/product/product.resolver.ts

@@ -0,0 +1,33 @@
+import { ApolloError } from "apollo-server-micro";
+import { Field, ObjectType, Query, Resolver } from "type-graphql";
+
+@ObjectType()
+class Product {
+  @Field()
+  name: string;
+
+  @Field({ nullable: true })
+  price: number;
+}
+
+@Resolver(Product)
+export class ProductResolver {
+  private products = [
+    { name: "Product A", price: 100 },
+    { name: "Product B", price: 200 },
+    { name: "Product C", price: 200 },
+    { name: "Product D", price: 200 },
+    { name: "Product E", price: 200 },
+    { name: "Product F", price: 200 },
+  ];
+
+  @Query(() => [Product!])
+  async getProducts(): Promise<Product[]> {
+    return this.products.map((product) => {
+      if (Math.random() < 0.3) {
+        throw new ApolloError("Custom error from products");
+      }
+      return product;
+    });
+  }
+}

src/pages/api/graphql.ts

@@ -5,9 +5,11 @@ import { ApolloServerPluginLandingPageLocalDefault } from "apollo-server-core";
 import { UserResolver } from "@/graphql/schema/users/users.resolver";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { DealResolver } from "@/graphql/schema/deals/deals.resolver";
+import { ProductResolver } from "@/graphql/schema/product/product.resolver";
 
 const schema = await buildSchema({
-  resolvers: [UserResolver, DealResolver],
+  resolvers: [ProductResolver, UserResolver, DealResolver],
+  nullableByDefault: true,
 });
 
 const server = new ApolloServer({

src/pages/error-handling/index.tsx

@@ -0,0 +1,75 @@
+import ExampleExplanation from "@/components/ExampleExplanation";
+import { useGetErrorWithDataQuery } from "@/generated/graphql";
+
+const EXPLANATION = {
+  title: "Error handling - Partial Data",
+  description:
+    "Error handling pokud příjdou pouze - partial data a je potřeba zobrazit data pouze, které příjdou.",
+};
+
+export default function ErrorHandlingPage() {
+  const { data, error, loading } = useGetErrorWithDataQuery({
+    errorPolicy: "all",
+  });
+
+  if (loading) {
+    return <div>Načítám...</div>;
+  }
+
+  if (data?.deals && data?.getProducts) {
+    return (
+      <main className="max-w-5xl mx-auto px-3">
+        <ExampleExplanation
+          title={EXPLANATION.title}
+          description={EXPLANATION.description}
+        />
+        <div className="py-10">
+          {data.deals.map((deal) => (
+            <div key={deal.id}>
+              <h1>{deal.title}</h1>
+            </div>
+          ))}
+        </div>
+        <div className="py-10">
+          {data.getProducts.map((product) => (
+            <div key={product.name}>
+              <h1>{product.name}</h1>
+            </div>
+          ))}
+        </div>
+      </main>
+    );
+  }
+
+  if (error) {
+    console.log("Error:", error);
+  }
+
+  return (
+    <main className="max-w-5xl mx-auto px-3">
+      <ExampleExplanation
+        title={EXPLANATION.title}
+        description={EXPLANATION.description}
+      />
+      {data.deals ? (
+        <div className="py-10">
+          {data.deals.map((deal) => (
+            <div key={deal.id}>
+              <h1>{deal.title}</h1>
+            </div>
+          ))}
+        </div>
+      ) : data.getProducts ? (
+        <div className="py-10">
+          {data.getProducts.map((product) => (
+            <div key={product.name}>
+              <h1>{product.name}</h1>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div>Nic tu není</div>
+      )}
+    </main>
+  );
+}