Action API namespaces
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.
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.
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:
1api/2 actions/3 (notifications)/ # folder to organize actions, doesn't modify API4 sendEmail.js # actions within folder, JS example: `api.sendEmail(...)`5 sendSMS.js6 sendSlack.js
If you wanted to call the sendEmail
action, you would use the JS client API call:
// no namespace is added to the APIawait api.sendEmail();
// no namespace is added to the APIawait 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 atapi/actions
- a
bar.js
global action is added to thefoo
folder
api/actions/foo/ # global action namespacebar.js # global action, JS example: `api.foo.bar(...)`
The bar
action could then be called using:
// the 'foo' namespace included in the API pathawait api.foo.bar();
1mutation {2 foo {3 bar {4 success5 errors6 result7 }8 }9}
// the 'foo' namespace included in the API pathawait 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 atapi/actions/foo
- the
bar.js
global action is added to thebiz
folder
api/actions/foo/ # global action namespacebiz/ # nested global action namespacebar.js # global action, JS example: `api.foo.biz.bar(...)`
The bar
global action could then be called using:
// the nested 'biz' namespace included in the API pathawait api.foo.biz.bar();
1mutation {2 foo {3 biz {4 bar {5 success6 errors7 result8 }9 }10 }11}
// the nested 'biz' namespace included in the API pathawait 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:
1api/2 models/3 biz/ # shared namespace4 shopifyProduct/5 schema.gadget.ts6 actions/7 create.js # model action, JS example: `api.biz.shopifyProduct.create(...)`8 actions/9 biz/ # shared namespace10 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:
// the 'biz' namespace included in the API pathawait api.biz.bar();await api.biz.shopifyProduct.create();
// the 'biz' namespace included in the API pathawait api.biz.bar();await api.biz.shopifyProduct.create();