You can group related global actions (and models) by adding namespaces to your API. Namespaces allow you to organize your actions and give you more control over the shape of your generated JavaScript and GraphQL API.
Available in Gadget framework version 1.1+
API namespaces were added with Gadget framework version 1.1. If you're using an older version of Gadget, you'll need to
upgrade your framework version to use action namespaces.
How action namespaces work
Namespacing in Gadget is folder-based, and action namespaces are added by creating folders in the api/actions directory. The folder name is used as the namespace in the generated API.
Namespaces can also be shared between actions and models, and nested.
Just want a folder without changing your API?
If you want to add a folder to organize actions without changing your API, you can put the folder name in parentheses (). If you already have an app that uses the API client, this is a great way to organize your files and folders without changing your API.
For example, adding a (notifications) folder to organize actions:
Add a (notifications) folder to organize actions without changing your API
1api/
2 actions/
3 (notifications)/ # folder to organize actions, doesn't modify API
4 sendEmail.js # actions within folder, JS example: `api.sendEmail(...)`
5 sendSMS.js
6 sendSlack.js
If you wanted to call the sendEmail action, you would use the JS client API call:
Example JS client API call with a (notifications) folder
JavaScript
// no namespace is added to the API
await api.sendEmail();
// no namespace is added to the API
await api.sendEmail();
Adding action namespaces
Action namespaces are only supported for global actions.
Global action namespaces
To create a new global action namespace:
Create a new folder that is a child of the api/actions folder
Add an action to the new folder
For example, to add a bar.js global action to a foo namespace:
a foo folder is created at api/actions
a bar.js global action is added to the foo folder
Example: adding a 'foo' global action namespace
api/
actions/
foo/ # global action namespace
bar.js # global action, JS example: `api.foo.bar(...)`
The bar action could then be called using:
Example: API calls with a 'foo' global action namespace
// the 'foo' namespace included in the API path
await api.foo.bar();
1mutation{
2foo{
3bar{
4success
5errors
6result
7}
8}
9}
// the 'foo' namespace included in the API path
await api.foo.bar();
Nested action namespaces
Model and global action namespaces can be nested. To nest a namespace, add additional folders to an existing namespace folder.
For example, adding a biz namespace to a foo/bar.js global action:
a biz folder is created at api/actions/foo
the bar.js global action is added to the biz folder
Example: adding a nested 'biz' global action namespace
api/
actions/
foo/ # global action namespace
biz/ # nested global action namespace
bar.js # global action, JS example: `api.foo.biz.bar(...)`
The bar global action could then be called using:
Example: API calls with a nested 'biz' global action namespace
// the nested 'biz' namespace included in the API path
await api.foo.biz.bar();
1mutation{
2foo{
3biz{
4bar{
5success
6errors
7result
8}
9}
10}
11}
// the nested 'biz' namespace included in the API path
await api.foo.biz.bar();
Shared namespaces
Global actions and models can share namespaces. For example, if you wanted to add a biz namespace that contains both a global action and a model's action:
Example: a shared 'biz' namespace
1api/
2 models/
3 biz/ # shared namespace
4 shopifyProduct/
5 schema.gadget.ts
6 actions/
7 create.js # model action, JS example: `api.biz.shopifyProduct.create(...)`
8 actions/
9 biz/ # shared namespace
10 bar.js # global action, JS example: `api.biz.bar(...)`
The bar global action and shopifyProduct.create model action could then be called using the biz namespace: