chore(babel-plugin-remove-graphql-queries): Convert index.js

[zachdtaylor]

Description

Convert packages/babel-plugin-remove-graphql-queries/src/index.js to TypeScript

Related Issues

Related to #21995

[pieh]

can we type state to avoid any? AFAIK we don't pass any options so generic one should work (if there is one)

[zachdtaylor]

It's hard to tell what state is supposed to be because there aren't many resources that I've found on writing babel plugins. Based on this type file, state is either the generic type S or any, and after some digging it looks like S is set to {} by default. Are you thinking we should just create our own type for state?

[zachdtaylor]

Update on this. I created a custom type for state called IState and I get an error:

Type '(this: {}, path: NodePath<Program>, state: IState) => void' is not assignable to type 'VisitNodeFunction<{}, Program> | VisitNodeObject<{}, Program> | undefined'.
  Type '(this: {}, path: NodePath<Program>, state: IState) => void' is not assignable to type 'VisitNodeFunction<{}, Program>'.
    Types of parameters 'state' and 'state' are incompatible.
      Property 'file' is missing in type '{}' but required in type 'IState'.

I think it's because the type of state is expected to be {}. However, when I explicitly declare the type like this:

Program(path: NodePath<Program>, state: {}): void {
  ...
}

I get an error saying property 'file' does not exist on type '{}'. I'm unsure how to resolve this issue at the moment. If you know a solution, @pieh, feel free to just add it in.

[pvdz]

Ok well the reported errors seem legit errors. So please run yarn typecheck locally and for anything that pops up :)

[pvdz]

@zachtylr21 friendly ping. Do you want to keep working on this? I think it was close to being merged?

[zachdtaylor]

@pvdz Yes I'd like to finish this and get it merged. Apologies, I didn't see your comment from 6 days ago. Is running yarn typecheck the last thing to do?

[pvdz]

I usually do yarn typecheck and yarn lint (and watch for errors) because for some reason sometimes errors sometimes only get caught by one or the other. That may have been fixed by now but that's what I still do :)

[zachdtaylor]

@pvdz I'm getting an error that says Cannot find module 'gatsby'. Do I need to import gatsby in a different way?

[zachdtaylor]

@pvdz There are also a bunch of linting errors in the gatsby-admin package, which is outside the scope of this PR.

[pvdz]

The gatsby-admin stuff is either brand new or old problems that require a rebase/merge of master to resolve. I'll try that.

[pvdz]

Some yarn typecheck stuff left it seems

[zachdtaylor]

I'm a little confused at how to alter the graphql type to include those functions. Here is the definition of the graphql type, from gatsby/index.d.ts.

It seems I need to alter the file gatsby/index.d.ts. Is that outside the scope of this PR?

Also, I'm not getting the errors on lines 249, 300, and 360. .unshiftContainer is defined in @types/babel__traverse/index.d.ts and path.node.callee.property is type any according to @babel/types/lib/index.d.ts, so path.node.callee.property.name should be valid.

[zachdtaylor]

You guys will have to excuse my ignorance on a couple of these things, I'm pretty new to contributing to Gatsby.

After changing import { graphql } from "gatsby" to import graphql from "gatsby/graphql" like @vladar suggested, I'm getting a new error.

I thought this meant I have to do npm install in the packages/gatsby directory, but doing that gave me more errors:

I'm super confused as to why none of these packages can be found. Is there something I'm missing here? I really want to get this PR moving along but I keep running into frustrating issues like this.

[vladar]

I pulled your branch, ran yarn bootstrap in the monorepo root and I don't see this problem. I see several other errors though:

packages/babel-plugin-remove-graphql-queries/src/index.ts:249:33 - error TS2339: Property 'name' does not exist on type 'ArrayExpression | ArrowFunctionExpression | AssignmentExpression | AwaitExpression | ... 40 more ... | PrivateName'.
  Property 'name' does not exist on type 'ArrayExpression'.

249       path.node.callee.property.name === `useStaticQuery` &&
                                    ~~~~

packages/babel-plugin-remove-graphql-queries/src/index.ts:300:20 - error TS2339: Property 'unshiftContainer' does not exist on type 'NodePath<Program>'.

300               path.unshiftContainer(`body`, importDeclaration)
                       ~~~~~~~~~~~~~~~~

packages/babel-plugin-remove-graphql-queries/src/index.ts:360:20 - error TS2339: Property 'unshiftContainer' does not exist on type 'NodePath<Program>'.

360               path.unshiftContainer(`body`, importDeclaration)
                       ~~~~~~~~~~~~~~~~


Found 3 errors.

CI fails with exact same error.

So my best guess is that your dependency setup is messed up. Are you using npm? This may be the issue. If so I suggest you remove node_modules, run yarn in the monorepo root and try again.

[zachdtaylor]

Ah, I was using npm. 🤦 I switched to yarn and now I'm seeing the same errors. I fixed them, and just pushed. I should note that the method unshiftContainer doesn't exist in any of Babel's type declaration files, so I had to change that method call to something that I believe is equivalent based on this StackOverflow post.

[pvdz]

It seems something snapshotty is failing over this thing fc97669#diff-0cee23a635d1c08646f35342b6dee83f

[pvdz]

lgtm and tests are passing. Thank you 💜