Example: Apollo GraphQL integration with React + CLJS

It came up in Slack about how we use Apollo with ClojureScript at work.

While I can’t release our integration with apollo-client and Reagent fully (…yet), I did whip up an example using react-apollo and hx using their getting-started guide: https://github.com/Lokeh/apollo-cljs-example

The benefits of using apollo is you get reactive queries across your application that share cache and update when relevant mutations happen, good developer tooling, and pretty flexible: you can swap out cache implementation / network layer / etc. pretty easily.

It also supports synchronously fetching while server-side rendering on Node.js, which is non-trivial to implement.

5 Likes

@lilactown Really nice. But have to wonder why would you choose to use clojurescript + apollo ?

The frontend team at work is moving to apollo client. I’ve had quite a few discussions with them, but as far as I can tell the only place Fulcro comes out short is that it’s in clojurescript.

I kinda get using it if you’re a js shop (seems like the best option there). But in cljs given that you have other options, why go to the trouble of having the state in js data-structures and all that inter-op ?

With Fulcro + Pathom you kinda get everything apollo has to offer + more. Some things are a bit different (ex: refresh model) but personally think Fulcro is a lot better designed than apollo (cljs helps).

Honestly I haven’t used Fulcro, it’s high on my list of things to try out soon.

My understanding of Fulcro is that it’s much more buy-in (whole app framework) rather than something I can plop in as a component in my application. It’s also more general; it handles all state and can do lots of optimizations and provide a more unified dev experience.

At work, we integrated apollo-client with Reagent and have had lots of success with that. We don’t use the react-apollo bindings, but the raw apollo client provides us what we needed.

In retrospect, Fulcro is exactly what we wanted, we just didn’t know it at the time. We ended up building a sort of hodge-podge version of it + ad-hoc query DSLs instead of pathom. If I could do it over, I might’ve tried to push Fulcro.

But there’s something really nice about incrementally adoptable solutions like Apollo. It helped us get to where we are and figure out exactly what we needed when we had no clue. It’s a tricky business, this design stuff. :wink:

3 Likes

Cool. Makes total sense in the context you described.
Thank you for sharing. :slight_smile:

1 Like

I’m also interested in using some better state management – Apollo now promotes React Hooks as the preferred interaction which looks very easy to integrate with hx. I wonder how this changes things.

Indeed Fulcro might be a better fit for CLJS but I also like the fact that Apollo can be used as a library in an ad-hoc fashion.

There’s some important features Apollo offers that Pathom doesn’t yet support - i.e. subscriptions

I’ve updated the example to use helix (successor of hx) and Apollo’s React hooks package (instead of their function-as-child pattern).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.