Postgrest: End to end example with React (or another JS framework)?

[NickEmpetvee]

Hi all,

I'm using PostgreSQL 10.x, PostgREST 0.5 on a Win81 development environment. The front end is React (possibly with Redux, but don't know yet if we'll need it). Can anyone point me to a good example of how to leverage this in a JS framework, preferably React? I'm new to REST and have several questions...

For example, once you make the login API call in JS successfully, do you store the returned token in a JS variable? Do you send it back up to PostgREST endpoint in subsequent calls... and how do you set up different services in PostgREST so that they checking the token? How do you deal with an expired token - do you force a new login even if the user has kept an active login? Again, real beginner questions that can probably be answered with a strong working example.

I've got PostgREST running successfully and am using SQL Management as described here: https://postgrest.org/en/v5.0/auth.html#sql-user-management. The database creates the JWT in the login function as described in that link. I've also successfully tested that I can curl rpc/jwt_test and have it return a token.

Help appreciated.

[john-kelly]

Here's an example app I made: john-kelly/elm-postgrest-spa-example

The example is a SPA in Elm + PostgREST. The example implements the relatively popular gothinkster/realworld spa example standard in PostgREST.

If you can ignore the following details:

1. My example is in Elm and you've requested JS
2. I don't follow the RealWorld backend specification exactly
3. Example is using postgrest 4 rather than 5

After considering those drawbacks, the following points indicate that this example may serve you well:

1. Elm is very similar in mental model to React + Redux, so it aligns with your original request
2. The backbone/organization of the PostgREST part of the example is heavily inspired by subzerocloud/postgrest-starter-kit
3. In theory, you could hook up any frontend (js + react + redux) to the PostgREST backend component of the example

I hope the example serves you well. If you have other questions feel free to open an issue on my project and/or message me in the Elm slack or PostgREST gitter

[NickEmpetvee]

Thanks @john-kelly will take a look!

[christiaanwesterbeek]

Check out react-admin. Those guys at Marmelab are really doing an excellent job. I'm in the final stages of getting an app into production that is build with Postgres + PostgREST + react-admin. Best stack I ever worked with.

[mduecker]

@christiaanwesterbeek
Can you share more details on how you implemented PostgREST as a data provider for react-admin?

Did you use this?
https://github.com/igorclark/react-admin-postgrest-client

[dorbodwolf]

@christiaanwesterbeek also need some tips

[christiaanwesterbeek]

@mduecker I'm using the repo where the one you linked is forked from https://github.com/tomberek/aor-postgrest-client .

One tip to all of you. Relative to query time, render time etc I have found that the sheer network-request time is taking up most. When you find that a single page (within a SPA application) is doing many network request to build up the user interface, consider building a single database function that builds a larger JSON object. Give it permissions and PostgREST should expose it as rpc/my-function.

[tomberek]

i was curious what the latest was on good frontends to use with PostgRest. Any good case study or updates to starter kits?

[christiaanwesterbeek]

@tomberek Without a doubt that was and still is react-admin! But for new projects I would use react-admin with postgraphile and ra-postgraphile instead of PostgREST.