Basic Data Flow For tRPC, Prisma, and an External API based on NextAuth data

I want to display a list of objects from a database based on the current user (already done) Once the user selects the object, how should I go about fetching more data such as detailed information on that selection? How should I properly set up fetching so that I never get stale data and the UI is in sync? I also would like to use a mutation for submitting a form, anything special I should keep in mind?
8 Replies
Brendonovich
Brendonovichβ€’14mo ago
Once the user selects the object, how should I go about fetching more data such as detailed information on that selection?
easiest way would be to just conditionally render a component that does another query for the more detailed information and has the object's id passed as props
Hycord | @ When Replying
Currently I have a useQuery to fetch all of the objects for the current user, then once they select one I store the ID of their selection in a useState, and use a useEffect on that to call refetch on another useEffect to grab detailed info
Brendonovich
Brendonovichβ€’14mo ago
no need to do a refetch if the query's arguments are changing unless u want some specific cache behaviour maybe
Hycord | @ When Replying
Currently it’s just one page so I have all the useQueries in the same component
Brendonovich
Brendonovichβ€’14mo ago
i'd suggest splitting to multiple components so u don't even call the sub-query unless an object is picked and the sub-component is rendered
Hycord | @ When Replying
πŸ‘ thankyou Should I memoize anything?
Brendonovich
Brendonovichβ€’14mo ago
i don't think so? react query should take care of caching stuff
Hycord | @ When Replying
πŸ‘