T
TanStack•4y ago
afraid-scarlet

Making the data value changeable

Hello, I have a question about making the data I get back changeable, namely what happens is that I have a useQuery that gives me back an id from the server, but in my queryFn the id is a query parameter, which is supposed to be changed whenever I select a different user in the UI through a Dropdown component. 
const { isLoading: isLoadingUsers, data: users } = useQuery(
    ["users"],
    () => getUsers(),
    {
      select: (data) => 
        data
          ?.filter((user) => user.email === session.user.email)
          .map((user) => ({ user_id: user.id, org_id: user.org_id })),
    }
  );
const { isLoading: isLoadingUsers, data: users } = useQuery(
    ["users"],
    () => getUsers(),
    {
      select: (data) => 
        data
          ?.filter((user) => user.email === session.user.email)
          .map((user) => ({ user_id: user.id, org_id: user.org_id })),
    }
  );
This is how I get the id as well as another id, which is irrelevant. However I do not know how I can have that id as the first id on page load, and then whenever I choose a different user from a Dropdown, for that id to change. It made a bit of sense to me to do it with useState to put the id I get back as the initial state, and then update it whenever I pick something from the Dropdown, but that doesn't work for me
2 Replies
afraid-scarlet
afraid-scarletOP•4y ago
Also, the first useQuery I wrote above's data value is used for another useQuery, the value is inserted in the dependency array, however, currently, that value doesn't change, it's always the first value I get through the first useQuery
absent-sapphire
absent-sapphire•4y ago
in the above snippet, if session.user.email changes (it doesn't show where this comes from, so I'm assuming props or state) and your component re-renders top-down, select will run again and you'll get a different result.

Did you find this page helpful?