You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: guides/create-graphql-query.md
+52-48
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,16 @@
1
1
## At a glance
2
2
3
-
In this guide, we’ll guide you through the steps you need to create a successful query in GraphQL
3
+
You're working on a new implementation for Leader of the Pack, an outdoor equipment retailer. Let's say that you don't ship Kayaks to every location because of the logistical challenges of shipping something that large. So you need to add
4
+
a query that will show you if a particular product can be shipped to a particular zip code. Once you have that data in the system you need to have a way to make it available to the client. This is usually done by creating a GraphQL query. In this guide, we’ll walk you through the steps you need to create a query in GraphQL and have it recognized by the system.
4
5
5
-
## Identify which plugin owns the query
6
+
## What you need
6
7
7
-
The complete Reaction Commerce GraphQL API is created by stitching together domain-specific APIs from all of the API plugins. So when adding a new query, the first step is to decide which plugin should own it. This is usually obvious, but not always. You should think about whether any other plugins or services will need to call your query. If the query is fundamental to the system, then it may need to go in the "core" plugin, if no better alternative exists.
8
+
You should already have an understanding of what fields/data you wish to share with the client and what GraphQL type each field is. Consult the [GraphQL Reference](https://graphql.org/learn/schema/) for more info on GraphQL types.
8
9
9
-
## Understand the difference between a plugin query function and a GraphQL query resolver
10
+
## Identify which plugin owns the query
10
11
11
-
See [Resolver mutations and queries vs. plugin mutations and queries in the GraphQL concepts docs](../docs/graphql-concepts.md)
12
+
The complete Open Commerce GraphQL API is created by stitching together domain-specific APIs from all the API plugins. So when adding a new query, the first step is to decide which plugin should own it. This is usually obvious, but not always. You should think about whether any other plugins or services will need to call your query.
13
+
Typically, if you are adding data your new query will exist in your custom plugin.
12
14
13
15
## Name the query
14
16
@@ -23,53 +25,53 @@ When choosing a name for the query, there are a few rules to follow:
23
25
- If it doesn't already exist, create `schema.graphql` in `schemas` in the plugin.
24
26
- Import the GraphQL file into `index.js` and default export it in an array:
>NOTE: For large plugins, you can split to multiple `.graphql` files and exportamulti-itemarray.
36
+
> NOTE: For large plugins, you can split to multiple `.graphql` files and export a multi-item array.
35
37
36
38
- In the `.graphql` file, add your query within `extend type Query { }`. Add an `extend type Query` section near the top if the file doesn't have it yet.
37
39
- If your query returns multiple documents, it should return a Relay-compatible Connection and accept standard connection arguments. This is true of any `fields` on any types you create as well.
- Document your query, the new types, and all fields in those types using string literals. See [Documenting a GraphQL Schema](../guides/developers-guide/core/developing-graphql.md#documenting-a-graphql-schema).
43
+
- Document your query, the new types, and all fields in those types using string literals. <!-- TODO: See [Documenting a GraphQL Schema](../guides/developers-guide/core/developing-graphql.md#documenting-a-graphql-schema)-->.
42
44
- If not already done, register your schemas in the plugin's `index.js` file:
43
45
44
-
```js
45
-
import schemas from "./schemas";
46
+
```js
47
+
importschemasfrom"./schemas";
46
48
47
-
export default async function register(app) {
48
-
await app.registerPlugin({
49
-
graphQL: {
50
-
schemas
51
-
},
52
-
// other props
53
-
});
54
-
}
55
-
```
49
+
exportdefaultasyncfunctionregister(app) {
50
+
awaitapp.registerPlugin({
51
+
graphQL: {
52
+
schemas
53
+
},
54
+
// other props
55
+
});
56
+
}
57
+
```
56
58
57
59
## Create the plugin query file
58
60
59
61
- If it doesn't already exist, create `queries` folder in the plugin, and add an `index.js` file there.
60
-
- In `queries`, create a file for the query, e.g. `widgets.js` for the `widgets` query. The file should look something like this:
62
+
- In `queries`, create a file for the query, e.g. `isAvailableToShip.js` for the `isAvailableToShip` query. The file should look something like this:
61
63
62
64
```js
63
65
importLoggerfrom"@reactioncommerce/logger";
64
66
65
67
/**
66
-
* @method widgets
68
+
* @methodisAvailableToShip
67
69
* @summary TODO
68
70
* @param{Object}context - an object containing the per-request state
69
71
* @return{Promise<Object>} TODO
70
72
*/
71
-
export default async function widgets(context) {
72
-
Logger.info("widgets query is not yet implemented");
@@ -99,20 +101,20 @@ export default async function register(app) {
99
101
}
100
102
```
101
103
102
-
Your plugin query function is now available in the GraphQL context as `context.queries.widgets`.
104
+
Your plugin query function is now available in the GraphQL context as `context.queries.isAvailableToShip`.
103
105
104
106
> NOTE: The queries objects from all plugins are merged, so be sure that another plugin does not have a query with the same name. The last one registered with that name will win, and plugins are generally registered in alphabetical order by plugin name. Tip: You can use this to your advantage if you want to override the query function of a core plugin without modifying core code.
105
107
106
108
## Add a test file for your query
107
109
108
-
If your query is in a file named `widgets.js`, your Jest tests should be in a file named `widgets.test.js` in the same folder. Initially you can copy and paste the following test:
110
+
If your query is in a file named `isAvailableToShip.js`, your Jest tests should be in a file named `isAvailableToShip.test.js` in the same folder. Initially you can copy and paste the following test:
test("expect to return a Promise that resolves to null", async () => {
115
-
const result = await widgets(mockContext);
117
+
constresult=awaitisAvailableToShip(mockContext);
116
118
expect(result).toEqual(null);
117
119
});
118
120
```
@@ -121,24 +123,26 @@ This of course should be updated with tests that are appropriate for whatever yo
121
123
122
124
## Create the GraphQL query resolver file
123
125
126
+
> Note: All of these elements are required for your query to work and if missing often will not throw an error. If your query is not showing or not returning any data up you probably need to recheck that all of these pieces are here and have the correct name and format.
127
+
124
128
- If it doesn't already exist, create `resolvers` folder in the plugin, and add an `index.js` file there.
125
129
- If it doesn't already exist, create `resolvers/Query` folder in the plugin, and add an `index.js` file there. "Query" must be capitalized.
126
-
- In `resolvers/Query`, create a file for the query resolver, e.g. `widgets.js` for the `widgets` query. The file should look something like this initially:
130
+
- In `resolvers/Query`, create a file for the query resolver, e.g. `isAvailableToShip.js` for the `isAvailableToShip` query. The file should look something like this initially:
127
131
128
132
```js
129
133
/**
130
-
* @name "Query.widgets"
134
+
* @name"Query.isAvailableToShip"
131
135
* @method
132
136
* @memberofMyPlugin/GraphQL
133
-
* @summary resolver for the widgets GraphQL query
137
+
* @summary resolver for the isAvailableToShip GraphQL query
134
138
* @param{Object}parentResult - unused
135
139
* @param{Object}args - an object of all arguments that were sent by the client
136
140
* @param{Object}context - an object containing the per-request state
137
141
* @return{Promise<Object>} TODO
138
142
*/
139
-
export default async function widgets(parentResult, args, context) {
@@ -202,17 +206,17 @@ Calling your query with GraphQL should now work.
202
206
203
207
## Add a test file for your query resolver
204
208
205
-
If your query resolver is in a file named `widgets.js`, your Jest tests should be in a file named `widgets.test.js`in the same folder. Initially you can copy and paste the following test:
209
+
If your query resolver is in a file named `isAvailableToShip.js`, your Jest tests should be in a file named `isAvailableToShip.test.js` in the same folder. Initially you can copy and paste the following test:
const result = await widgets(null, { /* TODO */ }, {
215
-
queries: { widgets: mockQuery },
218
+
constresult=awaitisAvailableToShip(null, { /* TODO */ }, {
219
+
queries: { isAvailableToShip: mockQuery },
216
220
userId:"123"
217
221
});
218
222
@@ -229,8 +233,8 @@ Adjust the query function and the query resolver function until they work as exp
229
233
230
234
## Update the JSDoc comments
231
235
232
-
Write/update jsdoc comments for the plugin query function, the query resolver, and any util functions. The resolver function must have `@memberof <PluginName>/GraphQL` in the jsdoc, and the `@name` must be the full GraphQL schema path in quotation marks, e.g., "Query.widgets". (ThequotationmarksarenecessaryfortheoutputAPIdocumentationtobecorrectduetotheperiods.)
236
+
Write/update jsdoc comments for the plugin query function, the query resolver, and any util functions. The resolver function must have `@memberof <PluginName>/GraphQL` in the jsdoc, and the `@name` must be the full GraphQL schema path in quotation marks, e.g., "Query.isAvailableToShip". (The quotation marks are necessary for the output API documentation to be correct due to the periods.)
233
237
234
238
## More resources
235
239
236
-
[Build an API plugin guide](https://mailchimp.com/developer/open-commerce/guides/build-api-plugin/)
240
+
[Build an API plugin guide](https://mailchimp.com/developer/open-commerce/guides/build-api-plugin/)
0 commit comments