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:
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.
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.