# 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>
    ...

### 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;
    }),

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 the UI (not working)

## My questions

1. Why is my UI not updating? router.refresh and revalidatepath do nothing