Changes to fix examples

- Used commonjs module resolution in tsconfig.json - Changed 'AppCountriesQuery' to 'appCountriesQuery' in app.tsx to satisfy the relay compiler - Changed 'type' in package.json to 'commonjs' to satisfy relay
jotaijs · Jun 25, 2024 · ccbdee9 · ccbdee9
1 parent 2fc3603
commit ccbdee9
Show file tree

Hide file tree

Showing 15 changed files with 211 additions and 217 deletions.
diff --git a/examples/01_minimal/package.json b/examples/01_minimal/package.json
@@ -1,7 +1,7 @@
 {
   "name": "jotai-relay-example",
   "version": "0.1.0",
-  "type": "module",
+  "type": "commonjs",
   "private": true,
   "dependencies": {
     "babel-plugin-relay": "latest",

diff --git a/examples/01_minimal/relay.config.js b/examples/01_minimal/relay.config.js
@@ -1,6 +1,9 @@
-export default {
+// eslint-disable-next-line no-undef
+module.exports = {
   language: 'typescript',
-  src: '../src',
-  schema: './data/schema.graphql',
+  // eslint-disable-next-line no-undef
+  src: `${__dirname}/src`,
+  // eslint-disable-next-line no-undef
+  schema: `${__dirname}/data/schema.graphql`,
   exclude: ['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**'],
 };
diff --git a/examples/01_minimal/src/__generated__/AppCountriesQuery.graphql.ts b/examples/01_minimal/src/__generated__/AppCountriesQuery.graphql.ts
diff --git a/examples/01_minimal/src/app.tsx b/examples/01_minimal/src/app.tsx
@@ -10,7 +10,7 @@ import {
   graphql,
 } from 'relay-runtime';
 
-import type { AppCountriesQuery } from './__generated__/AppCountriesQuery.graphql';
+import type { appCountriesQuery } from './__generated__/AppCountriesQuery.graphql';
 
 const myEnvironment = new Environment({
   network: Network.create(async (params, variables) => {
@@ -29,9 +29,9 @@ const myEnvironment = new Environment({
   store: new Store(new RecordSource()),
 });
 
-const countriesAtom = atomWithQuery<AppCountriesQuery>(
+const countriesAtom = atomWithQuery<appCountriesQuery>(
   graphql`
-    query AppCountriesQuery {
+    query appCountriesQuery {
       countries {
         name
       }
@@ -42,10 +42,11 @@ const countriesAtom = atomWithQuery<AppCountriesQuery>(
 
 const Main = () => {
   const [data] = useAtom(countriesAtom);
+
   return (
     <ul>
-      {data.countries.map(({ name }) => (
-        <li key={name}>{name}</li>
+      {data.countries.map((country: { name: string }) => (
+        <li key={country.name}>{country.name}</li>
       ))}
     </ul>
   );

diff --git a/examples/01_minimal/tsconfig.json b/examples/01_minimal/tsconfig.json
@@ -3,8 +3,7 @@
     "strict": true,
     "target": "es2018",
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
+    "module": "CommonJS",
     "skipLibCheck": true,
     "allowJs": true,
     "noUncheckedIndexedAccess": true,

diff --git a/examples/02_typescript/package.json b/examples/02_typescript/package.json
@@ -1,7 +1,7 @@
 {
   "name": "jotai-relay-example",
   "version": "0.1.0",
-  "type": "module",
+  "type": "commonjs",
   "private": true,
   "dependencies": {
     "babel-plugin-relay": "latest",

diff --git a/examples/02_typescript/src/__generated__/AppCountriesQuery.graphql.ts b/examples/02_typescript/src/__generated__/AppCountriesQuery.graphql.ts
diff --git a/examples/02_typescript/src/app.tsx b/examples/02_typescript/src/app.tsx
@@ -7,7 +7,7 @@ import { Environment, Network, RecordSource, Store } from 'relay-runtime';
 // @ts-ignore
 import graphql from 'babel-plugin-relay/macro';
 
-import type { AppCountriesQuery } from './__generated__/AppCountriesQuery.graphql';
+import type { appCountriesQuery } from './__generated__/AppCountriesQuery.graphql';
 
 const myEnvironment = new Environment({
   network: Network.create(async (params, variables) => {
@@ -26,9 +26,9 @@ const myEnvironment = new Environment({
   store: new Store(new RecordSource()),
 });
 
-const countriesAtom = atomWithQuery<AppCountriesQuery>(
+const countriesAtom = atomWithQuery<appCountriesQuery>(
   graphql`
-    query AppCountriesQuery {
+    query appCountriesQuery {
       countries {
         name
       }

diff --git a/examples/02_typescript/tsconfig.json b/examples/02_typescript/tsconfig.json
@@ -3,8 +3,7 @@
     "strict": true,
     "target": "es2018",
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
+    "module": "CommonJS",
     "skipLibCheck": true,
     "allowJs": true,
     "noUncheckedIndexedAccess": true,

diff --git a/examples/03_errorhandling/package.json b/examples/03_errorhandling/package.json
@@ -1,7 +1,7 @@
 {
   "name": "jotai-relay-example",
   "version": "0.1.0",
-  "type": "module",
+  "type": "commonjs",
   "private": true,
   "dependencies": {
     "babel-plugin-relay": "latest",