Modifying a query result on the client

If I got an object from query and want to modify it, would it be more like

  const myvar = useQuery(api.file.myQuery)
  const [myvarState, setState] = useState(myvar)

  const myvar = useQuery(api.file.myQuery)
  const [myvarState, setState] = useState(myvar)

  const myvar = useQuery(api.file.myQuery)
  const [myvarState, setState] = useState(undefined)
  useEffect(() => {
    setState(myvar)
  }, [])

  const myvar = useQuery(api.file.myQuery)
  const [myvarState, setState] = useState(undefined)
  useEffect(() => {
    setState(myvar)
  }, [])

ballingt•8/23/24, 10:49 PM

React components are functions that run from top to bottom. The first time the component renders, might be undefined. Every time a new query result is received, the component will rerender and this time will have a value.

Your first code won't work because useState initializes the first time the component renders.

I would write this code like

but it's hard to tell what you want here, what's your goal?

ballingt•8/23/24, 10:50 PM

You could indeed use a useEffect to set the state, but it's going to rerun every time the query result changes. When the query result changes to do you want that to overwrite the local modifications you've made to the variable or not?

ballingt•8/23/24, 10:51 PM

Or to zoom out, what's the goal here?

Bballingt Or to zoom out, what's the goal here?

LightwavesOP•8/23/24, 11:00 PM

I'm querying a document.
The page it's on displays the content of an array of objects in the document
This page also lets you add something to that array. Usually I would either change the doc in the db and re-query the document to update the value or change the document in the db and update the frontend value with whatever was supposed to be added to the db.

basically i want to change the value of at some point, but i need it to be a state variable to do that, so what's the better way of making a query result a state variable

LightwavesOP•8/23/24, 11:01 PM

Or wait maybe im just misunderstanding how this works and "myvar" magically updates if I run a mutation

LightwavesOP•8/23/24, 11:02 PM

I guess that is so

LightwavesOP•8/23/24, 11:02 PM

my bad

LightwavesOP•8/23/24, 11:02 PM

I think I misread the docs

LightwavesOP•8/23/24, 11:02 PM

I thought you had to do something special to do this, not that it did it as a default

ballingt•8/24/24, 2:06 AM

Yeah this is what useQuery() does, it contains a setState that causes the component to rerender whenever the query result changes on the server.

ballingt•8/24/24, 2:07 AM

You can do things like you were describing for local-only updates, you create new variables that are based on the useQuery return value but may be something new — but it should be rare to need this, instead you can wait for the useQuery result to update, or use the built-in optimistic updates https://docs.convex.dev/client/react/optimistic-updates if you need less latency