Example of how to use Fragment in GQL within Fluent. We will be using fulfilments
Author:
Fluent Commerce
Changed on:
13 Dec 2023
Key Points
- Example on how to use fragments in GQL
Steps
Here is the standard query GQL to get the fulfilment data:
Here is the standard query GQL to get the fulfilment data:
1query {
2 fulfilments(ref:"170eb98a-792c-46cb-9e4b-e19391bc2b75") {
3 edges{
4 node{
5 id
6 ref
7 createdOn
8 order{
9 id
10 ref
11 items{
12 edges{
13 node{
14 product{ name }
15 quantity
16 }
17 }
18 }
19 }
20 }
21 }
22 }
23 }
24
25Language: json
Name: get fulfilment GQL
Description:
[Warning: empty required content area]
returning result
1{
2 "data": {
3 "fulfilments": {
4 "edges": [
5 {
6 "node": {
7 "id": "2860",
8 "ref": "170eb98a-792c-46cb-9e4b-e19391bc2b75",
9 "createdOn": "2022-11-25T04:33:21.973Z",
10 "order": {
11 "id": "2420",
12 "ref": "CC_123456",
13 "items": {
14 "edges": [
15 {
16 "node": {
17 "product": {
18 "name": "New Big HEADPHONE 5T"
19 },
20 "quantity": 1
21 }
22 },
23 {
24 "node": {
25 "product": {
26 "name": "BIG BOTTLE 1D"
27 },
28 "quantity": 6
29 }
30 },
31 {
32 "node": {
33 "product": {
34 "name": "1 BIG_BOOK1B"
35 },
36 "quantity": 6
37 }
38 }
39 ]
40 }
41 }
42 }
43 }
44 ]
45 }
46 }
47}Language: json
Name: fulfilment response
Description:
[Warning: empty required content area]create fragment for the order
Let's say I want to create a new Fragment for “order", you can create a new fragment at the bottom of the payload and replace the "order" (and the children fields) with ... new fragment name
1query {
2 fulfilments(ref:"170eb98a-792c-46cb-9e4b-e19391bc2b75") {
3 edges{
4 node{
5 id
6 ref
7 createdOn
8 ... f_order
9 }
10 }
11 }
12 }
13
14fragment f_order on Fulfilment{
15 fromFragment:order{
16 id
17 ref
18 items{
19 edges{
20 node{
21 product{ name }
22 quantity
23 }
24 }
25 }
26 }
27 }
28 Language: json
Name: sample fragment GQL
Description:
[Warning: empty required content area]
GQL with fragment returning result
1{
2 "data": {
3 "fulfilments": {
4 "edges": [
5 {
6 "node": {
7 "id": "2860",
8 "ref": "170eb98a-792c-46cb-9e4b-e19391bc2b75",
9 "createdOn": "2022-11-25T04:33:21.973Z",
10 "fromFragment": {
11 "id": "2420",
12 "ref": "CC_123456",
13 "items": {
14 "edges": [
15 {
16 "node": {
17 "product": {
18 "name": "New Big HEADPHONE 5T"
19 },
20 "quantity": 1
21 }
22 },
23 {
24 "node": {
25 "product": {
26 "name": "BIG BOTTLE 1D"
27 },
28 "quantity": 6
29 }
30 },
31 {
32 "node": {
33 "product": {
34 "name": "1 BIG_BOOK1B"
35 },
36 "quantity": 6
37 }
38 }
39 ]
40 }
41 }
42 }
43 }
44 ]
45 }
46 }
47}Language: json
Name: GQL with fragment returning result
Description:
[Warning: empty required content area]
As you can see from the result, the order fields are now replaced with "fromFragment". this is showing that the data is now coming from the fragment
Nested Fragments
We can even have fragments in the fragment. For example, create a new fragment on order Items:
1query {
2 fulfilments(ref:"170eb98a-792c-46cb-9e4b-e19391bc2b75") {
3 edges{
4 node{
5 id
6 ref
7 createdOn
8 ... f_order
9 }
10 }
11 }
12 }
13fragment f_order on Fulfilment{
14 fromFragment:order{
15 id
16 ref
17 ... f_orderItems
18 }
19 }
20
21fragment f_orderItems on Order{
22 fromf_ordertems:items{
23 edges{
24 node{
25 product{ name }
26 quantity
27 }
28 }
29 }
30}Language: json
Name: nested Fragments
Description:
[Warning: empty required content area]
nested Fragment result
1{
2 "data": {
3 "fulfilments": {
4 "edges": [
5 {
6 "node": {
7 "id": "2860",
8 "ref": "170eb98a-792c-46cb-9e4b-e19391bc2b75",
9 "createdOn": "2022-11-25T04:33:21.973Z",
10 "fromFragment": {
11 "id": "2420",
12 "ref": "CC_123456",
13 "fromf_ordertems": {
14 "edges": [
15 {
16 "node": {
17 "product": {
18 "name": "New Big HEADPHONE 5T"
19 },
20 "quantity": 1
21 }
22 },
23 {
24 "node": {
25 "product": {
26 "name": "BIG BOTTLE 1D"
27 },
28 "quantity": 6
29 }
30 },
31 {
32 "node": {
33 "product": {
34 "name": "1 BIG_BOOK1B"
35 },
36 "quantity": 6
37 }
38 }
39 ]
40 }
41 }
42 }
43 }
44 ]
45 }
46 }
47}Language: json
Name: nested Fragment response
Description:
[Warning: empty required content area]
