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>{{ props.name }}</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>{{ props.name }}</p>

<p>({{ props.company.name }})</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.

Developing applications with Pathom connect

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

REST Solution

GraphQL Solution

EQL/Pathom Solution