feat: mutation /w optimistic ui

package.json

@@ -55,7 +55,7 @@
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "autoprefixer": "^10.0.1",
- "drizzle-kit": "^0.20.7",
+ "drizzle-kit": "^0.20.13",
  "eslint": "^8.56.0",
  "eslint-config-next": "14.0.4",
  "eslint-plugin-react": "^7.33.2",

src/components/layouts/MainNav.tsx

@@ -16,6 +16,7 @@ const ROUTES = {
  OFFSET_PAGINATION_EXPANDED: "/offset-pagination-expanded",
  CREATE_DEAL: "/create-deal",
  SCROLL_OFFSET_PAGINATION: "/scroll-offset-pagination",
+ OPTIMISTIC_UI: "/optimistic-ui",
 };
 
 const MainNav = () => {
@@ -37,6 +38,11 @@ const MainNav = () => {
  Mutation - update cache
  </NavigationMenuLink>
  </Link>
+ <Link href={ROUTES.OPTIMISTIC_UI} legacyBehavior passHref>
+ <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+ Mutation - Optimistic UI
+ </NavigationMenuLink>
+ </Link>
  </NavigationMenuContent>
  </NavigationMenuItem>
  <NavigationMenuItem>

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

@@ -23,6 +23,8 @@ export class DealResolver {
  .values({ title, description, isActive })
  .returning();
 
+ await new Promise((resolve) => setTimeout(resolve, 5000));
+
  return newDeal[0];
  }
 

src/pages/index.tsx

@@ -1,34 +1,13 @@
-import Example from "@/components/Example";
-import { GetUsersDocument, useGetUsersQuery } from "@/generated/graphql";
-import { addApolloState, initializeApollo } from "@/utils/apolloClient";
 import { Inter } from "next/font/google";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
- const { data, refetch } = useGetUsersQuery();
-
  return (
  <main
  className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
  >
- <div>
- <button onClick={() => refetch()}>Refetch dogs from page</button>
- <pre>{JSON.stringify(data, null, 2)}</pre>
- </div>
- <Example />
+ <h1 className="font-bold">Apollo Client - Examples</h1>
  </main>
  );
 }
-
-export async function getServerSideProps() {
- const apolloClient = initializeApollo();
-
- await apolloClient.query({
- query: GetUsersDocument,
- });
-
- return addApolloState(apolloClient, {
- props: {},
- });
-}

src/pages/optimistic-ui/index.tsx

@@ -0,0 +1,212 @@
+import ExampleExplanation from "@/components/ExampleExplanation";
+import { Button } from "@/components/ui/button";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader } from "lucide-react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+ DealFragmentDoc,
+ GetDealsDocument,
+ useCreateDealMutation,
+ useGetDealsQuery,
+} from "@/generated/graphql";
+import { cn } from "@/lib/utils";
+
+const EXPLANATION = {
+ title: "Mutation - Optimistic UI",
+ description:
+ "Nastavení mutace, tak aby dočasně nastavila data do Cache, dokud se nevrátí opravdová data.",
+};
+
+export default function OptimisticUIPage() {
+ return (
+ <main className="max-w-5xl mx-auto px-3">
+ <ExampleExplanation
+ title={EXPLANATION.title}
+ description={EXPLANATION.description}
+ >
+ <div className="py-1">
+ <h3 className="font-semibold">Poznámky</h3>
+ <ul className="text-xs space-y-2">
+ <li>
+ - je potřeba nastavit v mutaci optimisticResponse kam se uloží
+ dočasný výsledek mutace
+ </li>
+ <li>
+ - aby se to projevilo je potřeba nastavit zase přímý update Cache
+ pro určitý fragment.
+ </li>
+ </ul>
+ </div>
+ </ExampleExplanation>
+
+ <CreateDealForm />
+ <ShowDeals />
+ </main>
+ );
+}
+
+const DealFormSchema = z.object({
+ title: z.string().min(2, {
+ message: "Deal title must be at least 2 characters.",
+ }),
+ description: z.string().min(2, {
+ message: "Deal description must be at least 2 characters.",
+ }),
+ isActive: z.boolean().default(false).optional(),
+});
+
+type DealInputs = z.infer<typeof DealFormSchema>;
+
+const CreateDealForm = () => {
+ const form = useForm<DealInputs>({
+ resolver: zodResolver(DealFormSchema),
+ defaultValues: {
+ title: "",
+ description: "",
+ isActive: false,
+ },
+ });
+
+ const [mutation, { loading }] = useCreateDealMutation({
+ update: (cache, { data: { createDeal } }) => {
+ cache.modify({
+ fields: {
+ deals(existingDeals = []) {
+ const newDealsRef = cache.writeFragment({
+ data: createDeal,
+ fragment: DealFragmentDoc,
+ });
+ return existingDeals.concat(newDealsRef);
+ },
+ },
+ });
+ },
+ });
+
+ function onSubmit(data: DealInputs) {
+ mutation({
+ variables: {
+ title: data.title,
+ description: data.description,
+ isActive: data.isActive,
+ },
+ optimisticResponse: {
+ __typename: "Mutation",
+ createDeal: {
+ __typename: "Deal",
+ id: "80",
+ title: `${data.title} (Zachvíli zmizím)`,
+ description: data.description,
+ isActive: data.isActive,
+ },
+ },
+ });
+ form.reset();
+ }
+
+ return (
+ <>
+ <Form {...form}>
+ <form
+ onSubmit={form.handleSubmit(onSubmit)}
+ className="w-2/3 space-y-6"
+ >
+ <FormField
+ control={form.control}
+ name="title"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Title</FormLabel>
+ <FormControl>
+ <Input placeholder="Deal title" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="description"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Description</FormLabel>
+ <FormControl>
+ <Input placeholder="Deal description" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="isActive"
+ render={({ field }) => (
+ <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+ <FormControl>
+ <Checkbox
+ checked={field.value}
+ onCheckedChange={field.onChange}
+ />
+ </FormControl>
+ <div className="space-y-1 leading-none">
+ <FormLabel>isActive</FormLabel>
+ </div>
+ </FormItem>
+ )}
+ />
+ <Button type="submit" disabled={loading}>
+ {loading && <Loader className="h-4 w-4 animate-spin mr-2" />}
+ Submit
+ </Button>
+ </form>
+ </Form>
+ </>
+ );
+};
+
+const ShowDeals = () => {
+ const { data, loading, error } = useGetDealsQuery({
+ fetchPolicy: "cache-first",
+ });
+
+ if (data?.deals.length)
+ return (
+ <div className="py-8">
+ {data.deals &&
+ data.deals.map((deal) => (
+ <div key={deal.id}>
+ <h1>
+ {deal.title}
+ <span
+ className={cn("text-sm text-green-400", {
+ "text-red-500": !deal.isActive,
+ })}
+ >
+ ({deal?.isActive ? "true" : "false"})
+ </span>
+ </h1>
+ </div>
+ ))}
+ </div>
+ );
+
+ if (loading) {
+ return <div>Loading...</div>;
+ }
+
+ if (error) {
+ return <div>Error..</div>;
+ }
+};