v0.0.9 - Add graphql + nextjs demo/recipe (#2)

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.0.9 NextJS demo, better watch mode
+
+- A tidy GraphQL example
+- A fix for watching config file on linux systems
+- New `browser` option in the config file to indicate which browser should be launched.
+- Cache globs now match hostname + pathname, not just pathname
+- Logfiles are now one per day instead a single giant file
+- Fix unit tests, unskip disabled tests
+
 ## 0.0.8 Bugfixes, config watchmode
 
 - Bugfix: `trust` list

README.md

@@ -92,6 +92,7 @@ module.exports = {
   },
   cache: {
     write: 'auto',
+    // Match a hostname + pathname string
     stage: ['**/graphql'],
     ignore: ['**/log'],
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jambox",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Tool for recording and playing back HTTP requests.",
   "bin": {
     "jam": "./jam.mjs",

recipes/nextjs-graphql-example/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.jambox/*.json
+.jambox/*.log

recipes/nextjs-graphql-example/README.md

@@ -0,0 +1,71 @@
+## NextJS + GraphQL Jambox Demo
+
+## Install
+
+Make sure to run `yarn` and `yarn build` at the root of this repo.
+
+```
+yarn
+```
+
+Set a `browser` option in `jambox.config.js` to either `chrome` or `chromium` based on
+what you have installed on your system. The default is `chromium`.
+
+## Run
+
+```
+❯ yarn dev
+yarn dev
+📻 Jambox 📻
+Process launched
+ready - started server on 0.0.0.0:3000, url: http://localhost:3000
+event - compiled client and server successfully in 2.1s (167 modules)
+wait  - compiling /_error (client and server)...
+wait  - compiling / (client and server)...
+event - compiled client and server successfully in 608 ms (171 modules)
+warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
+```
+
+## Visit the page
+
+```
+❯ yarn visit
+📻 Jambox 📻
+http://jambox-demo-graphql.vercel.app parsed as a URI. Launching a browser instance
+chromium launched with 17172
+Browser launched
+```
+
+A page should load at `http://jambox-demo-graphql.vercel.app`
+
+![](./initial.png)
+
+Note that this URL is simply proxied to your local NextJS app at `localhost:3000`
+
+Search for a couple of Pokemon, like "Picachu"
+
+![](./pikachu.png)
+
+And "Slowpoke"
+
+![](./slowpoke.png)
+
+The GraphQL requests to `https://graphql-pokemon2.vercel.app` should work fine,
+you can search for more images. Now we can turn off network requests in `jambox.config.js`
+
+```
+{
+  blockNetworkRequests: false
+}
+```
+
+Now try searching for additional Pokemon and notice how the requests fail. However the initial
+requests should still work as they are cached in the `.jambox/` folder.
+
+You may clear the `.jambox` folder to start fresh.
+
+## Cleanup
+
+To shutdown the server:
+
+`curl localhost:9000/shutdown`

recipes/nextjs-graphql-example/jambox.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  browser: 'chromium',
+  blockNetworkRequests: false,
+  forward: {
+    'http://jambox-demo-graphql.vercel.app': {
+      target: 'http://localhost:3000',
+      paths: ['**'],
+      // websocket: true will ensure NextJS can make a WS connection + HMR
+      websocket: true,
+    },
+  },
+  cache: {
+    write: 'auto',
+    // GraphQL request
+    stage: ['graphql-pokemon2.vercel.app/'],
+  },
+};

recipes/nextjs-graphql-example/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "dependencies": {
+    "next": "^12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "dev": "../../jam.mjs next",
+    "build": "next build",
+    "start": "next start",
+    "visit": "../../jam.mjs http://jambox-demo-graphql.vercel.app",
+    "clear-cache": "rm -rf .jambox/*.json"
+  }
+}

recipes/nextjs-graphql-example/pages/_app.js

@@ -0,0 +1,3 @@
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

recipes/nextjs-graphql-example/pages/index.js

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+
+const query = `query Pokemon($name: String) {
+ pokemon(name: $name) {
+   name
+   image
+ }
+}`;
+
+export default function IndexPage() {
+  const [name, setName] = useState('Pikachu');
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setLoading(true);
+    fetch('https://graphql-pokemon2.vercel.app', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify({
+        query,
+        variables: {
+          name,
+        },
+      }),
+    })
+      .then((res) => res.json())
+      .then(({ data }) => {
+        setLoading(false);
+        setData(data);
+      });
+  };
+
+  const handleInput = (e) => {
+    e.preventDefault();
+    setName(e.target.value);
+  };
+
+  return (
+    <>
+      <div>
+        <input value={name} onChange={handleInput}></input>
+        <button onClick={handleSearch}>Search</button>
+      </div>
+      <div>
+        {data ? (
+          <img src={data.pokemon.image} alt={data.pokemon.name} />
+        ) : loading ? (
+          <p>Loading…</p>
+        ) : (
+          <p>Search for an image</p>
+        )}
+      </div>
+    </>
+  );
+}