Updating query on state change

[honest niche]

I have a range of toggleable values that updates the state of my react application. This state is then used to query my database. How can I make it so that whenever this state changes, my query to the database is updated?

[karmic geyser]

Hi @honest niche. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can achieve this by using Convex's built-in reactivity feature. Convex automatically updates your queries whenever the state changes. This is done by tracking the dependencies of your query functions, including database changes, and triggering the subscription in the client libraries.

Here's an example of how you can do this:

First, create a Recoil atom that represents the global state of your application:

export const backendRoundState: RecoilState<null | BackendRound> = atom({
  key: 'backendRoundState',
  default: null as null | BackendRound,
});

Next, bind a Convex query function to that Recoil atom:

// Get the state setter for the backendRoundState
const [, setBackendRound] = useRecoilState(backendRoundState);

// The bound query for the current game reactively updated by Convex
const roundQuery = useQuery('queryRound', Id.fromString(gameId));

// Update the recoil atom whenever the global state changes
useEffect(() => {
    setBackendRound(roundQuery as BackendRound);
  }, [roundQuery, setBackendRound]);

In this example, whenever the global state changes, the Recoil atom will automatically be updated. Then Recoil ensures this new atom value also updates any dependent selectors and React components.

You can learn more about this in the Convex documentation (https://stack.convex.dev/local-remote-state-fast5#think-global).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@honest niche kapa.ai is still learning and improving, please let us know how it did by reacting below

[honest niche]

Can I use a normal react State like const [tabState, setTabState] = useState([CONVERSATIONSTATUS.NEW]); instead? @karmic geyser

[karmic geyser]

Let me check the knowledge base for you. One moment! :books:

---

Yes, you can use React's useState hook to manage the state of your application. When the state changes, you can use that state to make a new query to your database. Here's an example of how you can do this:

First, define your state:

const [tabState, setTabState] = useState([CONVERSATIONSTATUS.NEW]);

Then, use this state in your query function:

// convex/listTasksWithStatus.ts
import { query } from './_generated/server'

export default query(async ({ db }, { statuses }: { statuses: string[] }) => {
  // Grab rows in `tasks` table matching the given filter
  return await db
    .query("counter_table")
    .filter((q) =>
      q.or(
        // Match any of the given status values
        ...statuses.map((status) => q.eq(q.field("name"), status))
      )
    )
    .collect(); // collect all results into an array
});

In this example, statuses is the state of your application, and it's used to filter the query results. Whenever tabState changes, this query will be updated with the new state.

You can learn more about this in the Convex documentation (https://stack.convex.dev/help-my-app-is-overreacting#overreacting-can-be-distracting).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@honest niche kapa.ai is still learning and improving, please let us know how it did by reacting below

[remote wasp]

@honest niche this is a really weird response, Convex doesn't have anything to do with Recoil (you could use it, but most people don't)

Generally to

make it so that whenever this state changes, my query to the database is updated?
you should use useQuery(), and pass the client state as argument to your query function.

const [state1, setState1] = useState();
const [state2, setState2] = useState();

const data = useQuery(api.your.query, {value1: state1, value2: state2})