Reload on mutate

[altintx]

I have a list page and am adding an open/close action button on it. So

tickets = Ticket.find() // ...
const setClosedAt = useCallback(async(ticket: Ticket, closedAt: Date | null) => {
  ticket.closedAt = closedAt;
  await ticket.save();
  // I would expect to call tickets.reload() or ticket.refetch() or something along those lines to invalidate and re-render the page
}, []);
return <Await promise={tickets}>{(tickets) => <table>{tickets.map((ticket) => 
   <tr>
      <td>{ticket}</td>
      <td>{ticket.closedAt
        ? <button onClick={() => setClosedAt(ticket, null)}>Reopen</button>
        : <button onClick={() => setClosedAt(ticket, new Date())}>Close</button>
      }</td>
   </tr>
})</table>}</Await>;

This is a simple example, in reality I'm using Vite and the data loading and rendering are separated. I don't know if that's playing into it. But as-is, the page does not re-render the table rows after updating the closedAt field.

[stantanasi]

Hi! I never used Vite, so I’m not sure how it handles re-rendering specifically. But in React, here’s how I usually trigger a re-render — I tried to keep the code simple, but let me know if anything’s unclear:

// Create the state
const [articles, setArticles] = useState<Article[]>([]);

// Fetch in useEffect
useEffect(() => {
  // Fetch the data
  Article.find()
    .then((articles) => setArticles(articles)); // Update the state
}, []);

return (
  <div>
    {articles.map((article) => (
      <button
        onClick={() => {
          const update = async () => {
            // Create a new instance to avoid mutating the state directly
            const newArticle = article.copy({
              title: article.title + " - Number 1",
            });

            // Save the copied/updated article
            await newArticle.save();

            // Update the state with the new article instance
            setArticles((prev) => prev.map((a) => a.id === newArticle.id ? newArticle : a));
          };

          update()
            .then(() => console.log('UPDATED'));
        }}
      >
        {article.title}
      </button>
    ))}
  </div>
);

I use .copy() because in React, you shouldn't mutate state objects directly. Instead, you need to create a new instance and update the state using setState, which ensures React detects the change and re-renders the component. (documentation)

---

I would expect to call tickets.reload() or ticket.refetch() or something along those lines to invalidate and re-render the page

I'm not really sure if it's what you need, but you can do something like this:

// See that await or then are not called
const query /* : Query */ = Article.find(); 
// query is of type Query

const articles = await query;
// ..... do your update, for example:
// articles[0].title = "Updated title";
// await articles[0].save();

// Refetch/reload
articles = await query;

---

Let me know if all this helps

[altintx]

Thanks! I did not realize that await'ing a second time resulted in a re-query. That's exactly what I was looking for.

[stantanasi]

Great, glad it helped! Let me know if you have any other questions.