Exploring Database Interaction in elm-pages-v3 (nextjs/remix for elm)

Let's examine the persistence in the TODO app example (https://github.com/dillonkearns/elm-pages/tree/master/examples/todos).

Overall project structure

• app/Route/ files - one per page, has pages, data, and view functions; pages runs at build time (or on server); data runs at build time (or on server); view runs at build time (or on server) and on client (e.g. Visibility__.elm, Login.elm)

  • data function can refer to Backend.Custom tasks, which call out to functions exposed from local node js libraries. In particular, there is a custom-backend-task.ts file which defines functions wrapping prisma db calls.

• app/ files contains sitewide utilities like layout, menu messages, and global state

• prisma/schema.prisma defines the database schema

• src/* contains local elm libraries of functions that route modules and others can use. elm-pages-v3 recommends using app for well known files required by the framework, and using src for additional elm source code

Interaction with backend persistence

reads

• Receive any necessary parameters as data from front end, encode as a parameter object and send to backend custom functions. (Backend.Custom.run "getTodosBySession" (Encode.string parsedSession) resultDecoder where parsedSession is the parameter in this case.)

• The custom backend function receives arguments, runs call, responds with result.

• The response is decoded back to elm types, using the resultDecoder. The result is used building out a Data instance and eventually invoking Server.Response.render with this Data instance.

writes

• something triggers an update action, which reaches performAction

• receive data from action, encode it and other arguments to send to backend custom function (BackendTask.Custom.run "createTodo" (Encode.object [ ( "sessionId", sessionId |> Encode.string ) ] ) noopDecoder)

• the custom backend function receives arguments, runs call

• the response is decoded to elm types, which results in no value in this case, and then Server.Response.render with a populated ActionData