karlosos Posts - Answer Overflow

karlosos

Explore posts from servers

PD🧩 Plasmo Developers TTCTheo's Typesafe Cult

•Created by karlosos on 5/15/2024 in #questions

Weird rendering bugs on mobile. Is it NextJS or my CSS skills?

I'm developing an app. It works correctly on the web (pc), but when testing it on my smartphone I get some rendering artifacts, like a ghosting. See attached video. Never seen anything like that before. I found no pattern to replicate it. It usually appears when changing pages. Is this a problem with my CSS, my phone or with the NextJS? If you want to check it yourself see the link: https://wc2022bet.vercel.app/ I'd be grateful, even for the information that you were able to replicate it or not.

4 replies

TTCTheo's Typesafe Cult

•Created by karlosos on 10/1/2022 in #questions

trpc v10 Invalidating all queries from given router

Is it possible to invalidate all the queries under given router? Similarly as it is in react-query: https://tanstack.com/query/v4/docs/guides/query-invalidation Can I use query-client in trpc in the same way?

12 replies

TTCTheo's Typesafe Cult

•Created by karlosos on 9/17/2022 in #questions

setInfiniteQueryData and getInfiniteQueryData compatibility

I want to setInfiniteQueryData to old data (before mutation). I have a following code:

  const postMessage = trpc.useMutation("guestBook.postMessage", {
    onMutate: async (newMessage) => {
      ctx.cancelQuery(["guestBook.getPaginated"]);

      const previousDataGetPaginated = ctx.getInfiniteQueryData(["guestBook.getPaginated", { limit: 5 }]);

      if (previousDataGetPaginated) {
        ctx.setInfiniteQueryData(["guestBook.getPaginated", { limit: 5 }], (oldData) => {
          if (!oldData) {
            return {
              pages: [],
              pageParams: [],
            }
          }

          if (oldData.pages[0]) {
            oldData.pages[0].items.unshift({ ...newMessage, id: "0" })
          }

          return oldData;
        })
      }

      return { previousDataGetPaginated };
    },
    onError: (err, newMessage, context) => {
      ctx.setInfiniteQueryData(["guestBook.getPaginated", { limit: 5}], context?.previousDataGetPaginated);
    },
    onSettled: () => {
      ctx.invalidateQueries(['guestBook.getPaginated']);
    },
  });

  const postMessage = trpc.useMutation("guestBook.postMessage", {
    onMutate: async (newMessage) => {
      ctx.cancelQuery(["guestBook.getPaginated"]);

      const previousDataGetPaginated = ctx.getInfiniteQueryData(["guestBook.getPaginated", { limit: 5 }]);

      if (previousDataGetPaginated) {
        ctx.setInfiniteQueryData(["guestBook.getPaginated", { limit: 5 }], (oldData) => {
          if (!oldData) {
            return {
              pages: [],
              pageParams: [],
            }
          }

          if (oldData.pages[0]) {
            oldData.pages[0].items.unshift({ ...newMessage, id: "0" })
          }

          return oldData;
        })
      }

      return { previousDataGetPaginated };
    },
    onError: (err, newMessage, context) => {
      ctx.setInfiniteQueryData(["guestBook.getPaginated", { limit: 5}], context?.previousDataGetPaginated);
    },
    onSettled: () => {
      ctx.invalidateQueries(['guestBook.getPaginated']);
    },
  });

But line:

      ctx.setInfiniteQueryData(["guestBook.getPaginated", { limit: 5}], context?.previousDataGetPaginated);

      ctx.setInfiniteQueryData(["guestBook.getPaginated", { limit: 5}], context?.previousDataGetPaginated);

is having error in vscode:

Argument of type 'InfiniteData<{ items: { message: string; name: string; id: string; }[]; nextCursor: string | undefined; }> | undefined' is not assignable to parameter of type 'Updater<InfiniteData<{ items: { message: string; name: string; id: string; }[]; nextCursor: string | undefined; }> | undefined, InfiniteData<{ items: { message: string; name: string; id: string; }[]; nextCursor: string | undefined; }>>'. Type 'undefined' is not assignable to type 'Updater<InfiniteData<{ items: { message: string; name: string; id: string; }[]; nextCursor: string | undefined; }> | undefined, InfiniteData<{ items: { message: string; name: string; id: string; }[]; nextCursor: string | undefined; }>>'.ts(2345)

2 replies

Gaming

Programming