Framework linter 

Gadget has a built-in framework linter that will alert you to Gadget-specific issues in your project.

Lint rules are classified into 2 categories: errors and warnings. Errors must be fixed, warnings are optional.

Linter errors and warnings will only be reported in the Gadget editor.

Disabling rules 

You can disable rules using ESLint configuration comments.

For example, you can disable warnings for an entire file using:

/* eslint-disable */
import { Client } from "@gadget-client/<YOUR-APP-SLUG>";

export const api = new Client({ environment: "development" });

/* eslint-disable */
import { Client } from "@gadget-client/<YOUR-APP-SLUG>";

export const api = new Client({ environment: "development" });

You can also disable lint rules per line:

export const api = new Client({ environment: "development" }); // eslint-disable-line

// eslint-disable-next-line
export const api = new Client({ environment: "development" });

export const api = new Client({ environment: "development" }); // eslint-disable-line

// eslint-disable-next-line
export const api = new Client({ environment: "development" });

Errors 

These rules relate to errors in your Gadget project and must be fixed.

gadget/no-action-file-imports 

Importing from action files is not allowed.

To fix these errors:

• call the action using your api client in the action context
• create utility files for any shared functions, variables, or clients, and import from the utility file.

1// error - do not import from action files
2import { run as runCreateProduct } from "../models/product/actions/create";
3
4export const run: ActionRun = async ({ api }) => {
5  // not allowed
6  await runCreateProduct();
7};

1// error - do not import from action files
2import { run as runCreateProduct } from "../models/product/actions/create";
3
4export const run: ActionRun = async ({ api }) => {
5  // not allowed
6  await runCreateProduct();
7};

Fix this issue by calling actions with the api client included in your context param:

export const run: ActionRun = async ({ api }) => {
  // call actions using api client in action/route context param
  await api.product.create();
};

export const run: ActionRun = async ({ api }) => {
  // call actions using api client in action/route context param
  await api.product.create();
};

Warnings 

These rules relate to possible problems in your Gadget project.

gadget/no-client-static-environment-usage 

Recommend dynamic environment selection when initializing Gadget API clients.

This is an example of a static environment used to set up an API client:

import { Client } from "@gadget-client/<YOUR-APP-SLUG>";

export const api = new Client({ environment: "Development" });

import { Client } from "@gadget-client/<YOUR-APP-SLUG>";

export const api = new Client({ environment: "Development" });

And this is how a client can be initialized dynamically:

import { Client } from "@gadget-client/<YOUR-APP-SLUG>";

export const api = new Client({ environment: window.gadgetConfig.environment });

import { Client } from "@gadget-client/<YOUR-APP-SLUG>";

export const api = new Client({ environment: window.gadgetConfig.environment });

gadget/no-hardcoded-shopify-shops 

See Accessing the Shopify API for more detailed information on when to use the shopify connection's current property.

Typically you should avoid hardcoding Shopify shops when using the shopify client in actions.

export const run: ActionRun = async ({ api, connections }) => {
  const client = await connections.shopify.forShopId(params.shopId);
};

export const run: ActionRun = async ({ api, connections }) => {
  const client = await connections.shopify.forShopId(params.shopId);
};

Instead, use the shopify connection's current property:

export const run: ActionRun = async ({ api, connections }) => {
  const client = await connections.shopify.current;
};

export const run: ActionRun = async ({ api, connections }) => {
  const client = await connections.shopify.current;
};