Add a sample using the cache with wasm

normalized-cache/browser/README.md → normalized-cache/browser/js/README.md

@@ -1,6 +1,7 @@
-# Browser sample
+# Browser sample (Js)
 
-This samples demonstrates how to use the [Apollo SQL normalized cache](https://github.com/apollographql/apollo-kotlin-normalized-cache) in a browser application.
+This samples demonstrates how to use the [Apollo SQL normalized cache](https://github.com/apollographql/apollo-kotlin-normalized-cache) in a browser application,
+using Kotlin JS and Compose Html.
 
 It displays a list of repositories fetched from the [GitHub GraphQL API](https://docs.github.com/en/graphql).
 

normalized-cache/browser/wasmJs/README.md

@@ -0,0 +1,10 @@
+# Browser sample (Wasm)
+
+This samples demonstrates how to use the [Apollo SQL normalized cache](https://github.com/apollographql/apollo-kotlin-normalized-cache) in a browser application,
+using Kotlin Wasm and Compose Web (Canvas).
+
+It displays a list of repositories fetched from the [GitHub GraphQL API](https://docs.github.com/en/graphql).
+
+Note: to execute the app, provide a [GitHub access token](https://developer.github.com/v4/guides/forming-calls/#authenticating-with-graphql) in the `gradle.properties` file.
+
+This uses the [SQL.js](https://github.com/sql-js/sql.js/) library, with a custom Worker that loads/saves the database file via [OPFS](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system).

normalized-cache/browser/wasmJs/app/build.gradle.kts

@@ -0,0 +1,98 @@
+import com.apollographql.apollo.annotations.ApolloExperimental
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
+import java.io.File
+
+fun prop(key: String) = project.findProperty(key).toString()
+
+plugins {
+  kotlin("multiplatform")
+  id("org.jetbrains.compose")
+  kotlin("plugin.compose")
+  id("com.apollographql.apollo")
+}
+
+// Generate a BuildConfig.kt file with a constant for the GitHub OAuth key.
+val generateBuildConfigTask = tasks.register("generateBuildConfig") {
+  val outputDir = layout.buildDirectory.dir("generated/source/kotlin").get().asFile
+  outputs.dir(outputDir)
+  doFirst {
+    val outputWithPackageDir = File(outputDir, "com/example/browsersample").apply { mkdirs() }
+    File(outputWithPackageDir, "BuildConfig.kt").writeText(
+        """
+        package com.example.browsersample
+        object BuildConfig {
+          const val GITHUB_OAUTH_KEY = "${prop("githubOauthKey")}"
+        }
+      """.trimIndent()
+    )
+  }
+}
+
+kotlin {
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    browser()
+    binaries.executable()
+    compilerOptions {
+      target.set("es2015")
+    }
+  }
+
+  sourceSets {
+    wasmJsMain {
+      kotlin.srcDir(generateBuildConfigTask)
+
+      dependencies {
+        // Coroutines
+        implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.2")
+
+        // Compose
+        implementation(compose.runtime)
+        implementation(compose.foundation)
+        implementation(compose.material3)
+        implementation(compose.components.resources)
+
+        // Apollo
+        implementation("com.apollographql.apollo:apollo-runtime")
+        implementation("com.apollographql.cache:normalized-cache-sqlite:1.0.0-alpha.4")
+
+        // sqlite.js / SQLDelight
+        implementation("app.cash.sqldelight:web-worker-driver:2.1.0")
+        implementation(devNpm("copy-webpack-plugin", "9.1.0"))
+        implementation(npm("sql.js", "1.8.0"))
+
+        implementation("org.jetbrains.kotlinx:kotlinx-browser:0.3")
+        // Commented out as we use our own custom Worker that loads/saves the db file via OPFS.
+        // See `src/jsMain/resources/sqljs.opfs.worker.js`
+        // Uncomment to use the default SQLDelight worker instead, which stays in memory.
+        // implementation(npm("@cashapp/sqldelight-sqljs-worker", "2.1.0"))
+      }
+    }
+  }
+}
+
+apollo {
+  service("main") {
+    packageName.set("com.example.browsersample.graphql")
+
+    @OptIn(ApolloExperimental::class)
+    plugin("com.apollographql.cache:normalized-cache-apollo-compiler-plugin:1.0.0-alpha.4") {
+      argument("packageName", packageName.get())
+    }
+
+    introspection {
+      endpointUrl.set("https://api.github.com/graphql")
+      schemaFile.set(file("src/main/graphql/schema.graphqls"))
+      headers.put("Authorization", "Bearer ${prop("githubOauthKey")}")
+    }
+  }
+}
+
+compose.resources {
+  packageOfResClass = "com.example.browsersample"
+  generateResClass = always
+}
+
+// `./gradlew wasmJsBrowserDevelopmentRun --continuous` to run the dev server in continuous mode (should open `http://localhost:8080/`)
+// `./gradlew wasmJsBrowserDevelopmentExecutableDistribution` to build the dev distribution, results are in `build/dist/js/developmentExecutable`
+// `./gradlew wasmJsBrowserDistribution` to build the release distribution, results are in `build/dist/js/productionExecutable`

normalized-cache/browser/wasmJs/app/karma.config.d/sqljs-config.js

@@ -0,0 +1,28 @@
+// See https://sqldelight.github.io/sqldelight/2.1.0/js_sqlite/sqljs_worker/
+const path = require("path");
+const os = require("os");
+const dist = path.resolve("../../node_modules/sql.js/dist/")
+const wasm = path.join(dist, "sql-wasm.wasm")
+
+config.files.push({
+    pattern: wasm,
+    served: true,
+    watched: false,
+    included: false,
+    nocache: false,
+});
+
+config.proxies["/sql-wasm.wasm"] = path.join("/absolute/", wasm)
+
+// Adapted from: https://github.com/ryanclark/karma-webpack/issues/498#issuecomment-790040818
+const output = {
+    path: path.join(os.tmpdir(), '_karma_webpack_') + Math.floor(Math.random() * 1000000),
+}
+config.set({
+    webpack: {...config.webpack, output}
+});
+config.files.push({
+    pattern: `${output.path}/**/*`,
+    watched: false,
+    included: false,
+});

normalized-cache/browser/wasmJs/app/src/commonMain/graphql/extra.graphqls

@@ -0,0 +1,9 @@
+extend schema
+@link(
+  url: "https://specs.apollo.dev/kotlin_labs/v0.3",
+  import: ["@typePolicy"]
+)
+
+extend type Repository @typePolicy(keyFields: "id")
+
+extend type Organization @typePolicy(connectionFields: "repositories", keyFields: "id")

normalized-cache/browser/wasmJs/app/src/commonMain/graphql/operations.graphql

@@ -0,0 +1,24 @@
+query RepositoryListQuery($first: Int = 15, $after: String) {
+  organization(login: "github") {
+    repositories(first: $first, after: $after) {
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      edges {
+        cursor
+        node {
+          ...RepositoryFields
+        }
+      }
+    }
+  }
+}
+
+fragment RepositoryFields on Repository {
+  name
+  description
+  stargazers(first: 0) {
+    totalCount
+  }
+}