Hello! I keep my question generic, then I’ll go into more details if needed.
I have a table with entries and some action buttons (among which there is one to delete an entry), then a button to add a new entry. Now, when I use the form to save the data, the entry gets inserted on the db side, however on the frontend I have to refresh the page to see the change. Same goes if I delete an entry. How is this handled in Redwood?
I’ve also not quite worked this out, I have something similar, although my items get created on a separate page.
I have got it working that when I update an item from the list the table of items updates, and this depends on making sure that my mutation retrieves the fields that have changed (in this case status, and endActualDateTime.
In this example here, when I click the button an item to update it’s status, the status field updates automatically.
I’ve not worked out how to get it to update the table automatically when an item is deleted though, that still needs a refresh of the page (maybe I need to do something to re-fetch the whole list, or do soft deletes).
Yes, but not on the same component. I have on the page the Cell which fetches and renders the data, then below it the button to add (which only opens the modal) and the modal with the form and the component. The cell renders a component (defined) and passes down the results of the fetching query as a prop to Success (as explained in the tutorial)
I would usually recommend just updating the cache (as that doesn’t hard reload data, so you can animate and stuff), but there is also refetchQueries which you can hand some query to and it will reload whatever data.
We have similar pages with a Redwood Cell structure that renders a table of teams and a button to add a new item. The button opens a modal which contains a Redwood form.
In the Success state of the Redwood Cell we can add refetch as an input:
In some other usages we get refetch from useQuery like: const { loading, error, data, refetch } = useQuery(QUERY, { variables: { ... } }) and in some more complex patterns we wrap the refetch in a React.useRef() and pass the hook to the child component(s).