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

PD🧩 Plasmo Developers

•Created by karlosos on 5/25/2023 in #🔰newbie

Popup -> Content Script messaging

After clicking button in the popup I'd like to trigger some function defined in the Content Script. How should I approach it? I was reading the https://docs.plasmo.com/framework/messaging docs page but I don't saw this particular scenario. Should I use native Chrome API in that case? https://developer.chrome.com/docs/extensions/mv3/messaging/

11 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