I would like my app to have a set of user generated rows, ie table starts empty then user clicks '+', fills out a form, and a row is generated with their data. Each row should also query Grail using DQL based on the user's input in the form. I seem to be a bit confused on where to use pure objects, components, and hooks to structure this effectively.
Option 1 - array of pure objects
In my first attempt, I stored the user's form data in an array of pure objects and rendered with DataTable. When I added a hook to query DQL as another object property, I ran into issues with state not updating.
Option 2 - two arrays: one of pure objects and one of DQL hooks
Another thought was to keep this array of pure objects for the user input but push the new hook on to an array. This seemed messy when it came to cross-linking or trying to maintain array order.
Option 3 - 1 hook with an array of queries in it
Another variant would be storing the array of queries in a single hook invocation. I think this might resolve the state issues, but it makes handling state within the hook messy, e.g. tracking query, running, error, result, etc for each query.
Option 4 - 1 array of components
When user fills out form, a Row component is created with its own useDQL hook. Row is inserted into an array. DataTable somehow renders a memoized version of this array.
Could you please point me in the right direction?
Solved! Go to Solution.
Hi @lucas_hocker, I don't quite understand the first option's approach. What do you mean by "added a hook to query DQL as another object property"? The rest of the options seem too complex. Can you please share some code? Maybe I can spot what's causing the state issue.