Lucio Lucio - 1 year ago 66
React JSX Question

How to DRY with embed resources

I am currently designing a REST API that will be consumed by a ReactJS app. The two actual endpoints are the following:

[name, name] // each specy has 2 types, contained in an array


We can see that we have an endpoint that provides a list of all the
resources, and the
endpoint provides the
of a particular specy.

In my ReactJS app, I am going to have a Select field that contains a list of
(fetched via the
endpoint), and a List of all the
fetched from
. The user will then be able to filter species by selecting a type in the Select field.

Is it still DRY to have a list of
maintained in the Select component, and have the list of
in an array of
component ? Or should I find a way to inject the
fetched from their own endpoint in the

Answer Source

If you only have a /species endpoint and you create a list of all types, you have no way to cover the case where there is a type with zero species assigned to it. This may or may not be an issue. You also have to always load all species to get the complete list of types. This may be a lot of wasted bandwidth.

Instead, consider the following approach:

Endpoint /types gives you a list of all available types, which is all you initially need to fill your dropdown. Now, once the user selects a particular type, you call endpoint /types/{typeName}/species which gives you a list of all species assigned to type {typeName}. Again, you are only loading the chunk of data that the user wants to see.

Using this approach, you avoid both having to aggregate your data on the front end and having to download the complete data set before the application can fulfill its purpose.

Side note: the singular of species is also species, not specy. :-)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download