S
SolidJS•3w ago
theroamer29

Handle data fetching the correct way.

I am building a tab based UI. On inital load, I would load a list of pinned tabs and one tab detail (via api1) On tab switch, I would reload the detail content of one tab (via api2) The problem here is that the detail content of tab on the UI is come from 2 source listed above. I wonder how I should handle it or redesign the api1 (by passing selected tab) and remove api2, accepting some redundant data being fetched over for the pinned tabs? Thanks for your suggestion
1 Reply
Garrett Floyd
Garrett Floyd•3w ago
I have two "solutions". They may or may not work depending on your app design, which I don't know. 1. Use one server API that returns different data depending on the arguments presented to the API. For example I have an api that if I call it without an id it returns human readable data for certian fields, but if I call it with an id it returns foriegn keys for a sql table. 2. consider the following code block: 
   const submission = useSubmission(delEntryAction);
   let tableEntries = createAsync(() => {
     let data;
     if (submission.result === undefined){
       data = defFetchQuery(apiURL(), limit(), pageNum());
     } else {
       data = submission.result;
     }
     return data;
   });
   const submission = useSubmission(delEntryAction);
   let tableEntries = createAsync(() => {
     let data;
     if (submission.result === undefined){
       data = defFetchQuery(apiURL(), limit(), pageNum());
     } else {
       data = submission.result;
     }
     return data;
   });
I'm pretty sure but not certain createAsync() is like createMemo in that its a reactive context that only reruns if its dependencies change. In this example, when I submit a form the signal-like submission updates and triggers a refetch in createAsync. If you go with 2 you can just call a different api on signal update.

Did you find this page helpful?