Lucio Lucio - 7 days ago 9
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:

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

/types
name


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

In my ReactJS app, I am going to have a Select field that contains a list of
types
(fetched via the
/types
endpoint), and a List of all the
species
fetched from
/species
. 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
types
maintained in the Select component, and have the list of
species
in an array of
Specy
component ? Or should I find a way to inject the
types
fetched from their own endpoint in the
specy
?

Answer

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. :-)

Comments