@graphcommerce/docs 4.12.0-canary.3 → 4.12.0-canary.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.12.0-canary.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`9c3047c2f`](https://github.com/graphcommerce-org/graphcommerce/commit/9c3047c2fc6ea11ef9bd0c5128af883bffccc7e5) - Added GraphQL Injectable documentation ([@paales](https://github.com/paales))
8
+
3
9
  ## 4.12.0-canary.3
4
10
 
5
11
  ### Patch Changes
@@ -0,0 +1,74 @@
1
+ # Plugins GraphQL
2
+
3
+ GraphCommerce's GraphQL plugin system allows you to extend GraphCommerce in a
4
+ plug-and-play manner. Install a new package and the queries will be exdtended at
5
+ the right places.
6
+
7
+ ## What problem are we solving?
8
+
9
+ Without plugins it becomes complex to extend GraphQL queries and you'd probably
10
+ need to overfetch in lots of places by doing additional queries.
11
+
12
+ For example, to render additional attributes on the product listing, it was
13
+ necessary to modify a GraphQL query and know all the points the query is used.
14
+
15
+ The query below is inside the
16
+ [@graphcomemrce/magento-product](https://github.com/graphcommerce-org/graphcommerce/blob/main/packages/magento-product/components/ProductList/ProductList.graphql)
17
+ package and therefor it is not possible to modify:
18
+
19
+ ```graphql
20
+ query ProductList(
21
+ $pageSize: Int = 24
22
+ $currentPage: Int = 1
23
+ $filters: ProductAttributeFilterInput = {}
24
+ $sort: ProductAttributeSortInput = {}
25
+ $search: String = ""
26
+ ) {
27
+ products(
28
+ pageSize: $pageSize
29
+ currentPage: $currentPage
30
+ filter: $filters
31
+ sort: $sort
32
+ search: $search
33
+ ) {
34
+ # Simplified from the original query
35
+ items {
36
+ __typename
37
+ uid
38
+ ...ProductListItem
39
+ }
40
+ }
41
+ }
42
+
43
+ # Fragment used for a ProductListItem used when rendering any listing
44
+ fragment ProductListItem on ProductInterface @injectable {
45
+ uid
46
+ ...ProductLink
47
+ sku
48
+ name
49
+ small_image {
50
+ ...ProductImage
51
+ }
52
+ price_range {
53
+ minimum_price {
54
+ ...ProductListPrice
55
+ }
56
+ }
57
+ }
58
+ ```
59
+
60
+ ## How to modify an existing query?
61
+
62
+ Some Fragments inside GraphCommerce have been marked as `@injectable` which
63
+ allows you to inject our own fields in the fragments.
64
+
65
+ ```graphql
66
+ fragment MyCustomFragment on ProductInterface
67
+ @inject(into: ["ProductListItem"]) {
68
+ my_custom_attribute
69
+ }
70
+ ```
71
+
72
+ This will add the field to the `ProductListItem` fragment. After codegen has
73
+ been ran you will see that `my_custom_attribute` is also now present in
74
+ `ProductListItem.gql.ts` and `ProductList.gql.ts`.
@@ -1,6 +1,6 @@
1
- # Plugins
1
+ # Plugins React
2
2
 
3
- GraphCommerce plugin system allows you to extend GraphCommerce in a
3
+ GraphCommerce's React plugin system allows you to extend GraphCommerce in a
4
4
  plug-and-play manner. Install a new package and the code will be added at the
5
5
  right places.
6
6
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/docs",
3
3
  "homepage": "https://www.graphcommerce.org/docs",
4
4
  "repository": "github:graphcommerce-org/graphcommerce/docs",
5
- "version": "4.12.0-canary.3",
5
+ "version": "4.12.0-canary.4",
6
6
  "sideEffects": true,
7
7
  "devDependencies": {
8
8
  "@graphcommerce/prettier-config-pwa": "^4.0.7"