Skip to content

Instantly share code, notes, and snippets.

@Jannis
Last active May 6, 2020 10:47
Show Gist options
  • Save Jannis/c101329b80bbc6a498129af3e702b3f8 to your computer and use it in GitHub Desktop.
Save Jannis/c101329b80bbc6a498129af3e702b3f8 to your computer and use it in GitHub Desktop.
Using GraphQL / Apollo Client / React Apollo in the next ClojureScript release
;; Run using a local build of ClojureScript master, e.g.:
;; clj -Sdeps '{:deps {org.clojure/clojurescript {:mvn/version "1.10.155"}}}' -i build.clj
(require '[cljs.build.api :as b])
(b/watch "src"
{:output-dir "out"
:output-to "out/main.js"
:optimizations :none
:verbose true
:compiler-stats true
:main 'foo.core
:install-deps true
:npm-deps {:iterall "1.2.2"
:graphql "0.13.1"
:apollo-client "2.2.6"
:apollo-link-http "1.5.3"
:apollo-cache-inmemory "1.1.10"
:graphql-tag "2.8.0"
:react "16.2.0"
:react-dom "16.2.0"
:react-apollo "2.0.4"}
:package-json-resolution ["browser" "main"]
:infer-externs true
:closure-warnings {:non-standard-jsdoc :off}})
;; This file is really src/foo/core.cljs
(ns foo.core
(:require [apollo-client :refer [ApolloClient]]
[apollo-link-http :refer [HttpLink]]
[apollo-cache-inmemory :refer [InMemoryCache]]
[graphql-tag :as gql]
[react :refer [createElement]
[react-dom]
[react-apollo :refer [ApolloProvider graphql]]))
(js/console.info "GRAPHQL" graphql)
(js/console.info "APOLLO CLIENT" apollo-client)
(js/console.info "APOLLO LINK HTTP" apollo-link-http)
(js/console.info "APOLLO CACHE INMEMORY" apollo-cache-inmemory)
;; Create an Apollo client
(def client
(new ApolloClient
#js {:link (new HttpLink #js {:uri "https://mpjk0plp9.lp.gql.zone/graphql"})
:cache (new InMemoryCache)}))
(js/console.info "CLIENT" client)
;; Define a GraphQL query
(def query (gql "
{
hero {
name
friends {
name
appearsIn
}
}
}"))
(js/console.info "QUERY" query)
;; Run the query manually
(.. client
(query #js {:query query})
(then #(js/console.info "DATA" %))
(catch #(js/console.error %)))
;; Define a React component that renders a hero queried using GraphQL
(defn hero-component
[js-props]
(let [{:keys [loading error hero]} (:data (js->clj js-props :keywordize-keys true))]
(cond
loading (createElement "div" #js {} "Loading...")
error (createElement "div" #js {} "Error: " (str error))
hero [(createElement "h1" #js {} (:name hero))
(createElement "h2" #js {} "Friends")
(createElement "ul" #js {}
(mapv #(createElement "li" #js {} (:name %))
(:friends hero)))])))
;; Combine the component and the GraphQL query
(def root-component
((graphql query) hero-component))
;; Render the wrapper component, wrap it in an ApolloProvider
(react-dom/render
(createElement ApolloProvider #js {:client client}
(createElement root-component #js {} "Hello World"))
(.. js/document (getElementById "app")))
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<script src="out/main.js" type="text/javascript"></script>
</body>
</html>
02:10:50.804 GRAPHQL {…}
02:10:50.805 APOLLO CLIENT {NetworkStatus: {…}, FetchType: {…}, printAST: ƒ, ApolloClient: ƒ, default: ƒ, …}
02:10:50.805 APOLLO LINK HTTP {createHttpLink: ƒ, HttpLink: ƒ, __esModule: true}
02:10:50.806 APOLLO CACHE INMEMORY {defaultNormalizedCacheFactory: ƒ, enhanceErrorWithDocument: ƒ, writeQueryToStore: ƒ, writeResultToStore: ƒ, writeSelectionSetToStore: ƒ, …}
02:10:50.807 CLIENT ApolloClient {defaultOptions: {…}, resetStoreCallbacks: Array(0), link: ApolloLink, cache: InMemoryCache, store: DataStore, …}
02:10:50.809 QUERY {kind: "Document", definitions: Array(1), loc: Loc$$module$Users$jannis$Work$oss$jannis$cljs_npm_deps_mjs_issue$node_modules$graphql$language$parse…}
02:10:52.273 DATA {data: {…}, loading: false, networkStatus: 7, stale: false}
@dehli
Copy link

dehli commented Aug 9, 2018

Hey this is awesome! Looks like I'm getting the following error:

base.js:1357 Uncaught Error: Undefined nameToPath for module$Users$dehli$Desktop$re_frame$node_modules$graphql_anywhere$node_modules$apollo_utilities$lib$bundle_umd

Any ideas? Also your core.cljs is missing a delimiter ([react :refer [createElement]]). I would submit a PR but don't think I can for a gist. 😄

Edit: I think the problem line is [apollo-cache-inmemory]... will update this comment with progress.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment