Theo's Typesafe Cult•16mo ago

Help me not to give up on t3.

I've been trying to implement optimistic updates on my app but i'm getting a lot of errors. I started by following the react query docs and tried implementing it like this

const {mutate} = api.posts.create.useMutation({
  onMutate: async (newPost) => {
    await queryClient.cancelQueries({ queryKey: ['posts'] })

    const previousPosts = queryClient.getQueryData(['posts'])
    queryClient.setQueryData(['posts'], (old) => [...old, newPost])

    return { previousPosts }
  },
  onError: (err, newPost, context) => {
    queryClient.setQueryData(['post'], context.previousPosts)
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] })
  },
})

const {mutate} = api.posts.create.useMutation({
  onMutate: async (newPost) => {
    await queryClient.cancelQueries({ queryKey: ['posts'] })

    const previousPosts = queryClient.getQueryData(['posts'])
    queryClient.setQueryData(['posts'], (old) => [...old, newPost])

    return { previousPosts }
  },
  onError: (err, newPost, context) => {
    queryClient.setQueryData(['post'], context.previousPosts)
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] })
  },
})

but i keep getting this error

Type 'unknown' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)

Type 'unknown' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)

then @brendonovich adviced i used trpc helper wrapper functions instead of the react query queryClient directly. i then did this with the trpc helper functions

const {mutate, isLoading: isPosting} = api.posts.create.useMutation({
      onMutate: async (newPost) => {
        await utils.posts.getAll.cancel()
        const posts = api.posts.getAll.useQuery();
        const previousPosts = posts.data;
        utils.posts.getAll.setData(undefined, (old) => {
          return [...old, newPost];
        });
      },

      onSettled: () => 
api.posts.getAll.useQuery().refetch(),
    });

const {mutate, isLoading: isPosting} = api.posts.create.useMutation({
      onMutate: async (newPost) => {
        await utils.posts.getAll.cancel()
        const posts = api.posts.getAll.useQuery();
        const previousPosts = posts.data;
        utils.posts.getAll.setData(undefined, (old) => {
          return [...old, newPost];
        });
      },

      onSettled: () => 
api.posts.getAll.useQuery().refetch(),
    });

but i keep getting this error

Type '{ post: GetResult<{ id: string; title: Date; content: string | null; authorId: string; }, unknown> & {}; author: { id: string; username: string | null; profileImageUrl: string; name: string; }; }[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator

Type '{ post: GetResult<{ id: string; title: Date; content: string | null; authorId: string; }, unknown> & {}; author: { id: string; username: string | null; profileImageUrl: string; name: string; }; }[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator

i really need help because im junior but dont want to give up on trpc yet. if anybody needs my repo link, i can provide it please.

2 Replies

.traevelliath•16mo ago

Why would you manually set data to cache? In your place, I would have waited until mutation is successful, then: await utils.posts.getAll.invalidate()

MjOP•16mo ago

this is causing a weird layout shift so i decided on optimistic updates

Gaming

Programming

Help me not to give up on t3.