Fluent Commerce Logo
Docs
Sign In

Example of how to use Fragment in GQL within Fluent. We will be using fulfilments

How-to Guide

Author:

Fluent Commerce

Changed on:

13 Dec 2023

Key Points

  • Example on how to use fragments in GQL

Steps

Step arrow right iconHere 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
25

Language: json

Name: get fulfilment GQL

Description:

[Warning: empty required content area]
No alt provided

Step arrow right iconreturning result

No alt provided
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]

Step arrow right iconcreate 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]


No alt provided

Step arrow right iconGQL 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]
No alt provided


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 

Step arrow right iconNested 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]
No alt provided

Step arrow right iconnested 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]
No alt provided
Fluent Commerce

Fluent Commerce

Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

Fluent Logo