search

msupply-foundation / open-msupply

Open mSupply represents our most recent advancement in the Logistics Management Information System (LMIS), expanding on more than two decades of development inherited from the well-established legacy of the original mSupply.
https://msupply.foundation/open-msupply/
Other
19 stars 12 forks source link

Make APIs hooks easier to use/setup #3020

Open clemens-msupply opened 4 months ago

clemens-msupply commented 4 months ago

The suggestion

Currently, it takes quite a bit of boilerblate till you can start using an API, e.g. for patient api:

1) write graphql query and generate api 2) add generated endpoint to the api.ts file 3) add key to the usePatientApi() utils hook 4) add tanquery hook that calls the endpoitn from api.ts using the key from usePatientApi() 5) add the tanquery hook to index.ts file and to the Document and to the usePatient()

Ideally there should only be the first step, i.e. define your query, genereate the API and you are ready to go.

Thats what tanstack says about it now: https://tanstack.com/query/v4/docs/framework/react/graphql https://the-guild.dev/graphql/codegen/docs/guides/react-vue

Another one to consider: https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-react-query This one hasn't any usage examples, so a bit hard to say if it does what we want...

If that doesn't work for use we should at least simplify steps 2-5 to a minimum.

Refinement 20-06

We have an example now in the stock api, and in assets.

How do we move forward ?

Can slowly, as we touch the area, refactor to use simpler hook design. this can be staged, perhaps making navigation to the hook easier, as per @jmbrunskill suggestion making hook navigation more direct with click through, and then expand further functionality to use the simplified hooks (i.e. url parameters, row selection, etc..). Change to be summarised here in this issue

James also suggested there must be a way to see what the existing 'best' patterns are, maybe through wiki pointing to the code. And perhaps this issue can be closed at that stage

roxy-dao commented 4 months ago

Related #2528

jmbrunskill commented 2 months ago

One issue - We can't easily navigate from a hook to it's usages or back...

For example if I'm trying to find where useRepack is used. And click find references I get this...

image

I then have to search for useRepack

image

Then see that it's part of get so do a new search...

image

Why not just directly import the useRepack Hook?

E.g. image One level to jump from the component to the hook...

If you need to use multiple things under the API isn't that just multiple imports? Seems like a small price to pay for easier code navigation...

With this approach you can still have all the folder structure for organisation without having to go through the extra layers unless you want too?

jmbrunskill commented 2 months ago

I think for @CarlosNZ suggestion of combining the tanstack logic with the draft state needed for a component, it might make sense to put that hook next to the component it's needed for. Obviously if it's needed it more than one place it could be different, but I would have thought that draft state components are probably mostly specific to a particular component?

My suggestions here... https://github.com/msupply-foundation/open-msupply/compare/api-hook-refactor

andreievg commented 2 weeks ago

Refinement, moving milestones