Maj•2y ago

useQuery hook modify data on fetch.

Hello is it possible to modify the data that is fetched with useQuery hook in tRPC basically im storing a json object as a string in the db but after i fetch the string i dont know how to convert it to json properly..

3 Replies

MajOP•2y ago

also why does my app refetch data from the server everytime i tab out of the browser window and tab back in?.

isaac_way•2y ago

by default react query will refetch on window focus. you'll probably want to parse the json into an object before returning it. Zod is pretty nice for this:

const MyJsonSchema = z.object({
  prop: z.string(),
  prop2: z.number()
})

const JsonStringSchema = z.string().transform(v=>{
  return MyJsonSchema.parse(JSON.parse(v));
})

const MyJsonSchema = z.object({
  prop: z.string(),
  prop2: z.number()
})

const JsonStringSchema = z.string().transform(v=>{
  return MyJsonSchema.parse(JSON.parse(v));
})

And then return JsonStringSchema.parse(databaseObject.jsonStringField) from your procedure

MajOP•2y ago

Thank you but i managed to parse it on the frontend 🤷‍♂️ its probably not really efficient but im learning for now