watch errors out

[hyusetiawan]

running this command: npx @gqty/cli --target=src/gqty/index.ts --watch http://127.0.0.1:8000/graphql
will result in an error after after about 10 seconds or so:

> npx @gqty/cli --target=src/gqty/index.ts --watch http://127.0.0.1:8000/graphql

✔ Schema introspection completed.
✔ Code generation completed.
i [GQty] Watching for schema changes... (Ctrl+C to exit)
file:///Users/wahyu/.npm/_npx/193969d1af9b3740/node_modules/@gqty/cli/commands/default.mjs:2
import{cosmiconfig as B}from"cosmiconfig";import{readFile as E,watch as P}from"fs/promises";import"@graphql-codegen/core";import"@graphql-codegen/typescript";import"@graphql-tools/utils";import"@graphql-tools/wrap";import"commander";import"cross-fetch";import"fast-glob";import"graphql";import l from"inquirer";import"lodash-es/sortBy.js";import"mkdirp";import"prettier";import{convertHeadersInput as C}from"./default/convertHeadersInput.mjs";import{fetchSchemas as D,isURL as L}from"./default/fetchSchema.mjs";import{generateClient as M}from"./default/generateClient.mjs";import{getCommandName as W}from"./default/getCommandName.mjs";import{logger as h}from"./default/logger.mjs";import{promptInstall as F,runInstall as H}from"./default/promptInstall.mjs";const J=n=>n.name(W()).usage("[options] [endpoints...]").argument("[endpoints...]","GraphQL endpoints or schema files.").option("-H, --header <header>","Custom header for the introspection query.",(e,i)=>[...i,e],[]).option("--react","Include React hooks in the generated client.").option("--subscriptions [client]","Includes specified package as subscription client, must be graphql-ws compatible.").option("--no-subscriptions").option("--target <path>","Destination path for the generated client.").option("--typescript","Generates a TypeScript client over a JavaScript one.").option("--no-typescript").option("--install","Automatically install dependencies with current package manager.").option("--no-install").option("-w, --watch","Activate watch mode, regenerate on change changes.",!1).action(async(e,i)=>{var f,g,y,w,v,b,j,_,S,q,x,O,k;const t=await B("gqty").search().then(s=>{var u;return(u=s==null?void 0:s.config)!=null?u:{}});let a=e;if(a.length===0&&(process.stdin.isTTY||(h.error("Please provide your GraphQL endpoint(s)."),process.exit(1)),a=await N(t.introspections?Object.keys(t.introspections).join(", "):(f=t.introspection)==null?void 0:f.endpoint)),a=a.map(s=>s.trim()).filter(Boolean),a.length===0)return h.error("Please provide your GraphQL endpoint(s).");t.introspections||(t.introspections={});const m=await D(a,{headers:(y=C(i.header))!=null?y:(g=t.introspection)==null?void 0:g.headers,headersByEndpoint:t.introspections});Object.keys((w=t.introspections)!=null?w:{}).length>0;const o=await(async()=>{try{return JSON.parse(await E("package.json",{encoding:"utf-8"}))}catch{return}})();if(o&&((b=t.react)!=null||(t.react=((v=o.dependencies)==null?void 0:v.react)!==void 0),(S=t.javascriptOutput)!=null||(t.javascriptOutput=((j=o.dependencies)==null?void 0:j.typescript)===void 0&&((_=o.devDependencies)==null?void 0:_.typescript)===void 0)),m.getSubscriptionType()&&((q=t.subscriptions)!=null||(t.subscriptions="graphql-ws")),i.react&&(t.react=!0),i.subscriptions!==void 0&&(t.subscriptions=i.subscriptions||!1),i.typescript&&(t.javascriptOutput=!1),i.target&&(t.destination=i.target),e.length===0&&(t.react=await Y((x=t.react)!=null?x:!1),t.subscriptions=await $(t.subscriptions?t.subscriptions===!0?"graphql-ws":t.subscriptions:void 0),t.javascriptOutput=!await z(!t.javascriptOutput),(O=t.destination)!=null||(t.destination=await U(t.javascriptOutput?"gqty/index.js":"gqty/index.ts"))),(k=t.destination)!=null||(t.destination=t.javascriptOutput?"gqty/index.js":"gqty/index.ts"),L(e[0])&&(t.endpoint=e[0]),await M(m,{destination:"",...t}),e.length===0&&i.install===void 0?await F(t):o&&i.install!==!1&&await H(o,t),i.watch){const{printSchema:s}=await import("graphql"),{FasterSMA:u}=await import("trading-signals"),{default:Q}=await import("lodash-es/throttle.js"),I=await import("micromatch"),c=new u(3),R=()=>{try{return c.getResult()}catch{return c.prices.length===0?0:c.prices.reduce((r,p)=>r+p,0)/c.prices.length}},T=Q(async()=>{if(d)return;d=!0;const r=Date.now();try{const p=await D(a,{headers:C(i.header),headersByEndpoint:t.introspections,silent:!0}),A=s(p);if(A===G)return;G=A,await M(p,{destination:"",...t}),c.update(Date.now()-r)}finally{d=!1}},1e3,{leading:!0,trailing:!0});let d=!1,G=s(m);h.info("[GQty] Watching for schema changes... (Ctrl+C to exit)"),a.some(r=>L(r))&&(async()=>{for(;;){const r=Math.max(5e3,Math.min(3e4,R()*10));await new Promise(p=>setTimeout(p,r)),T()}})(),(async()=>{for await(const{filename:r}of P(".",{recursive:!0}))I.isMatch(r,a)&&T()})()}}),N=async n=>{const{endpoints:e}=await l.prompt({name:"endpoints",type:"input",message:"Where is your GraphQL endpoint or schema files?",default:n});return e.split(/[,\s+]/).map(i=>i.trim()).filter(Boolean)},U=async n=>{const{target:e}=await l.prompt({name:"target",type:"input",message:"Where should the client be generated?",default:n});return e},Y=async n=>{const{react:e}=await l.prompt({name:"react",type:"confirm",message:"Are you using React with GQty?",default:n});return e},$=async n=>{const{subscriptions:e}=await l.prompt({name:"subscriptions",type:"input",message:'Do you need a subscription client? (Enter "-" to skip)',default:(n==null?void 0:n.trim())||void 0});return(e==null?void 0:e.trim().replace(/^\-$/,""))||!1},z=async n=>{const{typescript:e}=await l.prompt({name:"typescript",type:"confirm",message:"Do you want a TypeScript client over vanilla.js?",default:n});return e};export{J as addCommand};


TypeError: I.isMatch is not a function
    at file:///Users/wahyu/.npm/_npx/193969d1af9b3740/node_modules/@gqty/cli/commands/default.mjs:2:4245

Please advise

[vicary]

This line in our source code const micromatch = await import('micromatch'); returns something else instead, which leads to the failure of micromatch.isMatch.

I need your help on two info:

1. The allowSyntheticDefaultImports option in your tsconfig.json
2. npm ls micromatch

[hyusetiawan]

I do not have allowSyntheticDefaultImports so it should be the default value (which i am not sure whether it's true or false)
this is the output of npm ls micromatch

  └─┬ @typescript-eslint/[email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected]```

[vicary]

I can reproduce this issue, will take a look soon.

[vicary]

Released a canary patch at 4.0.0-canary-20230826063452.ee5f83b6, please feel free to try it out.

A few side notes:

1. npx may need cache clearing to ensure the latest version.
2. We are recently experimenting the canary npm tag instead of latest. So until GQty v3 is out, you may switch from npx @gqty/cli to npx @gqty/cli@canary to continue trying the bleeding edge.

[hyusetiawan]

@vicary so far it works! it took quite a bit of time for the npx part to install but once it's running it hasn't crashed.

[hyusetiawan]

@vicary one thing, I think for watch, it should not hard exit on HTTP failure. Because during development, the graphql endpoint may restart/reload as it is being developed which creates a racing condition with the polling, if it happens during the polling, it will cause HTTP error and the watcher process exits.

[vicary]

Definitely worth considering, but these questions are non-trivial:

1. When to terminate, and when not to.
2. When not terminating, how much error information shall we print to aid debugging.

I'll start with the following behaviours in canary version 4.0.0-canary-20230827064833.09a6a4ad, let's see how it goes from there.

1. It will fetch once before watch mode actually starts, failure at this point still throws.
2. All errors encountered during watch mode will be best-effort compressed into a single line.
3. When the endpoints are recovered, e.g. received HTTP 200, or valid syntax on local schemas, the error line will be overwritten with the normal watching message.

[vicary]

For local developments in a monorepo, you may always choose to watch the schema files instead of firing up a local endpoint.

> npx @gqty/cli --watch '**/*.graphql'