Jannis/build.clj

## build.clj
;; 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}})

## core.cljs
;; 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")))

## index.html
!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>

## output.log
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}
	;; 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}