tRPC not accepting valid type for mutation

14 Replies

first off, that's an old version of tRPC if you're using strings for the name also you're using a hook (use*) inside of a map. per the rules of hooks (https://reactjs.org/docs/hooks-rules.html), Only Call Hooks at the Top Level Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls. (If you’re curious, we’ll explain this in depth below.) Only Call Hooks from React Functions Don’t call Hooks from regular JavaScript functions. Instead, you can: ✅ Call Hooks from React function components. ✅ Call Hooks from custom Hooks (we’ll learn about them on the next page). By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code. you probably want the non-hook version of a mutation, or to use the .mutate function returned by useMutation also your code is cursed by mixing a .map and a .push. if you're going to .push, use .forEach or a standard for loop. however in this case, since you're converting an array to another array, use .map and return each element instead, which evaluates to the new array you want

aditya•2y ago

yeah i started this before v10 got that how would you suggest to upload local data to server without looping? uploading every object would be complex

Samathingamajig•2y ago

from the looks of it, it could all be a single mutation the reason you're getting a typescript error is probably that useMutation doesn't immediately make a mutation request like useQuery does; it returns an object that has a function called "mutate" that you then call. the reason for this is that generally you want to use a query for fetching data immediately to display to the user (or also on interaction, like for example a search box) but a mutation to only run on an event like a button click since a mutation on a load ~~is dumb~~ could lead to problems

aditya•2y ago

if I use a single mutation and pass the whole SHOP_DATA then it will also require looping, and I tried that but it didn't work

aditya•2y ago

aditya•2y ago

how to use mutation if not a button click?

Samathingamajig•2y ago

it accepts an object of options

const { mutate } = trpc.useMutation(["shop.fill-data"]);
//...
const go = () => {
  const data = // ... ;
  // ...
  mutate(data);
}

const { mutate } = trpc.useMutation(["shop.fill-data"]);
//...
const go = () => {
  const data = // ... ;
  // ...
  mutate(data);
}

aditya•2y ago

I forgot the trpc syntax 🤡 🤡 my bad!!!! yesss working now thanks!!!!

Samathingamajig•2y ago

🫡

Samathingamajig•2y ago

also in the future, please post your code in codeblocks: ```typescript code here ``` instead of as images. more details as to why are here: https://meta.stackoverflow.com/q/285551/12101554, but tl;dr - easier for us to help if we can copy/paste - image files are significantly larger than text, so when we're on slow bandwidths it takes longer to load - the domain the images are on could be blocked (my school does this)

Meta Stack Overflow

Why should I not upload images of code/data/errors?

I am new to Stack Overflow, and I have asked about 5 questions so far. I have uploaded images of my code on most of my questions. On two separate occasions, two different users advised me not to up...

Samathingamajig•2y ago

if you paste your code here i can make a couple changes (unless you already fixed what i said earlier)

aditya•2y ago

const { mutate } = trpc.useMutation(["shop.fill-data"]);
  const go = () => {
    SHOP_DATA.map((coll) => {
      const data: ShopItemType[] = [];
      const routeName = coll.routeName;
      coll.items.map((item) => {
        data.push({
          itemId: item.id,
          name: item.name,
          price: item.price,
          imageUrl: item.imageUrl,
          routeName
        })
      });
      mutate(data);
    })
  }

const { mutate } = trpc.useMutation(["shop.fill-data"]);
  const go = () => {
    SHOP_DATA.map((coll) => {
      const data: ShopItemType[] = [];
      const routeName = coll.routeName;
      coll.items.map((item) => {
        data.push({
          itemId: item.id,
          name: item.name,
          price: item.price,
          imageUrl: item.imageUrl,
          routeName
        })
      });
      mutate(data);
    })
  }

also another question can I use trpc to fetch in getStaticProps or getServerSideProps?

Samathingamajig•2y ago

you can, but you shouldn't because the additional latency of http and the tRPC proxy. instead, extract the logic into a function and use that inside of gsp/gssp and tRPC

aditya•2y ago

I'll try that!

Gaming

Programming

tRPC not accepting valid type for mutation