typescriptgraphqlwebstormshopify-app

GraphQL schema not recognized in WebStorm


I am working in a repo for Shopify Admin UI extensions (and I think the repo was generated by some Shopify CLI) and using gql to write GraphQL formatted queries inside template strings. But WebStorm does not seem to recognize the schema.

We do have a .graphqlrc.ts file at our root

import fs from "fs";
import { LATEST_API_VERSION } from "@shopify/shopify-api";
import { shopifyApiProject, ApiType } from "@shopify/api-codegen-preset";
import type { IGraphQLConfig } from "graphql-config";

function getConfig() {
  const config: IGraphQLConfig = {
    projects: {
      default: shopifyApiProject({
        apiType: ApiType.Admin,
        apiVersion: LATEST_API_VERSION,
        documents: ["./app/**/*.{js,ts,jsx,tsx}"],
        outputDir: "./app/types",
      }),
    },
  };

  let extensions: string[] = [];
  try {
    extensions = fs.readdirSync("./extensions");
  } catch {
    // ignore if no extensions
  }

  for (const entry of extensions) {
    const extensionPath = `./extensions/${entry}`;
    const schema = `${extensionPath}/schema.graphql`;
    if (!fs.existsSync(schema)) {
      continue;
    }
    config.projects[entry] = {
      schema,
      documents: [`${extensionPath}/**/*.graphql`],
    };
  }

  return config;
}

module.exports = getConfig();

The GraphQL pane in WebStorm finds something:

enter image description here

But searching the "Schema discovery summary" only finds basic things like Boolean, and not any of the Shopify stuff like CollectionInput or anything like that.

Is the graphqlrc.ts set up correctly to get all the Shopify API info? (when I run dev ("shopify app dev -c shopify.app.dev.toml") and go to the GraphQL portal, all the APIs are there, FWIW.


Solution

  • in the file .graphqlrc.ts change

    module.exports = getConfig();
    

    to

    export default getConfig();
    

    then in the Schemas and Project Structure tab click on the root icon and press Restart Schema discovery button.

    enter image description here