carnegiepilled Posts - Answer Overflow

carnegiepilled

Explore posts from servers

•Created by carnegiepilled on 1/30/2024 in #❓-help

Why is my tRPC + Next 14 (app router) data fetching pattern not refreshing the UI?

Goals of this post: - to know why my UI is not refreshing after i mutate the backend - to learn a better data mutation and update pattern My code: Client component

export default function Page({ params }: { params: { doc: string } }) {
  const router = useRouter();

  const { data, refetch } = api.docs.getDoc.useQuery({
    docId: parseInt(params.doc),
  });

  const toggleLock = api.docs.toggleLock.useMutation({
    onSuccess: () => {
      router.refresh(); // doesn't actually refresh the UI
      revalidatePath("/"); // doesn't actually refresh the UI
    },
  });

  if (!data) {
    return <div>loading...</div>;
  }

  <Button
    disabled={toggleLock.isLoading}
    variant="secondary"
    className="mt-2"
    onClick={() =>
      toggleLock.mutate({
        docId: parseInt(params.doc),
      })
    }
  >
    {toggleLock.isLoading ? "LOADING..." : "Toggle Lock"}
  </Button>

</div>
    ...

export default function Page({ params }: { params: { doc: string } }) {
  const router = useRouter();

  const { data, refetch } = api.docs.getDoc.useQuery({
    docId: parseInt(params.doc),
  });

  const toggleLock = api.docs.toggleLock.useMutation({
    onSuccess: () => {
      router.refresh(); // doesn't actually refresh the UI
      revalidatePath("/"); // doesn't actually refresh the UI
    },
  });

  if (!data) {
    return <div>loading...</div>;
  }

  <Button
    disabled={toggleLock.isLoading}
    variant="secondary"
    className="mt-2"
    onClick={() =>
      toggleLock.mutate({
        docId: parseInt(params.doc),
      })
    }
  >
    {toggleLock.isLoading ? "LOADING..." : "Toggle Lock"}
  </Button>

</div>
    ...

tRPC route:

  toggleLock: publicProcedure
    .input(z.object({ docId: z.number() }))
    .mutation(async ({ ctx, input }) => {


      const docBefore = await ctx.db.query.docs.findFirst({
        where(fields, operators) {
          return operators.eq(fields.id, input.docId)
        },
      })
      const res = await ctx.db.update(docs).set({
        isLocked: docBefore?.isLocked ? false : true,
      }).where(eq(docs.id, input.docId))

      const docAfter = await ctx.db.query.docs.findFirst({
        where(fields, operators) {
          return operators.eq(fields.id, input.docId)
        },
      })

      return docAfter;
    }),

  toggleLock: publicProcedure
    .input(z.object({ docId: z.number() }))
    .mutation(async ({ ctx, input }) => {


      const docBefore = await ctx.db.query.docs.findFirst({
        where(fields, operators) {
          return operators.eq(fields.id, input.docId)
        },
      })
      const res = await ctx.db.update(docs).set({
        isLocked: docBefore?.isLocked ? false : true,
      }).where(eq(docs.id, input.docId))

      const docAfter = await ctx.db.query.docs.findFirst({
        where(fields, operators) {
          return operators.eq(fields.id, input.docId)
        },
      })

      return docAfter;
    }),

As you can see, the workflow is: 1) make a mutation on FE that toggles the docs.isLocked column 2) fetch the row on the backend to get the current state of said column 3) toggle mutation 4) fetch it after to get new state (mySql doesn't do returning updates) 5) refresh route (not working) My questions 1. Why is my UI not updating? router.refresh and revalidatepath do nothing

4 replies

RRailway

•Created by carnegiepilled on 11/3/2023 in #✋｜help

[bug] cannot delete project – @devs please delete it manually

5 replies

TtRPC

•Created by carnegiepilled on 10/27/2023 in #❓-help

Server Side Calls in tRPC not working (Next 13, App Router)

3 replies

TTCTheo's Typesafe Cult

•Created by carnegiepilled on 10/27/2023 in #questions

MDX not rendering custom components in Next

https://www.loom.com/share/ae7aa168d72e4c74ad87f696c51e1524

2 replies

RRailway

•Created by carnegiepilled on 5/30/2023 in #✋｜help

[URGENT] deploy breaking hours on production before launching my app– vc backed startup

need urgent help with failing build:

#11 ERROR: process "/bin/bash -ol pipefail -c yarn install --force" did not complete successfully: exit code: 127

#11 ERROR: process "/bin/bash -ol pipefail -c yarn install --force" did not complete successfully: exit code: 127

16 replies

Gaming

Programming