Developing applications with Pathom connect

Pathom and its connect engine brings to development a new way to think about solutions

Here I will describe my "problem solving" path when I'm working on REST, GraphQL and EQL web applications.

The Problem: Show the "Company name" on the "user card"

You are working on a regular web app where there is a UI component called "user card". It currently shows the "user name" and a "photo", like this:

Your task is to add the company name, like this:

REST Solution

If you are using a SPA with a REST API, this component probably get its data from an endpoint like GET /user/42/card that would return a small JSON payload like {"id": 42, "name": "Enzzo Cavallo" "photo_url": "..."}.

Once you are a ✨FullStack✨ developer, you will end up adding a new attribute on this GET to avoid another server interaction to render this tiny component.

GraphQL Solution

In a GraphQL SPA, this UI component should contain a GraphQL fragment, describing which data it needs.

GraphQL Fragment and JSX Component ## The query fragment userCard on User { name photo_url } // The component function UserCard (props) { return <aside> <img src={{ props.photo_url }}/> <p>{{ }}</p> </aside> }

To add the Company name, you will check the GraphQL Schema and see how to walk on the graph from User(id) into Company(name), then add this path to the component

GraphQL Fragment and JSX Component with company name ## The query fragment userCard on User { name photo_url company { name } } // The component function UserCard (props) { return <aside> <img src={{ props.photo_url }}/> <p>{{ }}</p> <p>({{ }})</p> </aside> }

EQL/Pathom Solution

Like GraphQL SPA, EQL clients (usually Fulcro) should have a Query within the UI Component.

Fulcro component (defsc UserCard [this props] {:query [:user/name :user/photo-url]} (aside (img {:src (:user/photo-url props)}) (p (:user/name props))))

On this UI component, you should at first simply add the :company/name in the UI query. Pathom will do its best connecting all resolvers in the application and discover itself the "path" from :user/id to :company/name.

Fulcro component with company name (defsc UserCard [this props] {:query [:user/name :company/name :user/photo-url]} (aside (img {:src (:user/photo-url props)}) (p (:user/name props)) (p (str "(" (:company/name props) ")"))))

Once you see that the current resolvers aren't capable to trace a path between these attributes, you can write a new resolver. Probably you will connect :user/id with :company/id, then the path from :company/id to :company/name should already be implemented.

On the time that you request, in any UI component, a :company/name (or any other company attribute) with am :user/id in context, pathom will already know how to find and connect these attributes.