@graphcommerce/docs 6.0.0-canary.48 → 6.0.0-canary.50
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 +4 -0
- package/framework/plugins-react.md +1 -1
- package/getting-started/create.md +1 -2
- package/package.json +2 -2
- package/readme.md +6 -4
- package/upgrading/graphcommerce-5-to-6.md +40 -13
- package/upgrading/readme.md +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -102,7 +102,7 @@ component with a `Prev` prop. The `Prev` prop is the original component.
|
|
|
102
102
|
|
|
103
103
|
When opening the React debugger you can see the plugin wrapped.
|
|
104
104
|
|
|
105
|
-
<img width="263" alt="Schermafbeelding 2023-03-15 om 12 16 59" src="https://user-images.githubusercontent.com/1244416/225293707-1ce1cd87-108b-4f28-b9ee-0c5d68d9a886.png"
|
|
105
|
+
<img width="263" alt="Schermafbeelding 2023-03-15 om 12 16 59" src="https://user-images.githubusercontent.com/1244416/225293707-1ce1cd87-108b-4f28-b9ee-0c5d68d9a886.png" />
|
|
106
106
|
|
|
107
107
|
### How are plugins loaded?
|
|
108
108
|
|
|
@@ -71,8 +71,7 @@ https://user-images.githubusercontent.com/1251986/158647122-dc57002f-a9c2-4661-a
|
|
|
71
71
|
3. `cp -R graphcommerce/examples/magento-graphcms/. my-project && rm -rf graphcommerce`
|
|
72
72
|
— copy example, delete repo
|
|
73
73
|
4. `cd my-project` — change directory to project folder
|
|
74
|
-
5. `
|
|
75
|
-
6. `rm CHANGELOG.md` — remove changelog
|
|
74
|
+
5. `rm CHANGELOG.md` — remove changelog
|
|
76
75
|
|
|
77
76
|
## Step 2: Magento and Hygraph API keys
|
|
78
77
|
|
package/package.json
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
"name": "@graphcommerce/docs",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/docs",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce/docs",
|
|
5
|
-
"version": "6.0.0-canary.
|
|
5
|
+
"version": "6.0.0-canary.50",
|
|
6
6
|
"sideEffects": true,
|
|
7
7
|
"devDependencies": {
|
|
8
|
-
"@graphcommerce/prettier-config-pwa": "6.0.0-canary.
|
|
8
|
+
"@graphcommerce/prettier-config-pwa": "6.0.0-canary.50"
|
|
9
9
|
},
|
|
10
10
|
"prettier": "@graphcommerce/prettier-config-pwa"
|
|
11
11
|
}
|
package/readme.md
CHANGED
|
@@ -10,10 +10,12 @@ metaDescription:
|
|
|
10
10
|
|
|
11
11
|
# GraphCommerce
|
|
12
12
|
|
|
13
|
-
GraphCommerce is a front-end framework
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
GraphCommerce is a front-end framework for building headless Magento (2)
|
|
14
|
+
ecommerce storefronts in React and Next.js. It provides a best-in-class example,
|
|
15
|
+
including components and utilities, for building high-quality and performant
|
|
16
|
+
commerce PWA's (Progressive Web App).
|
|
17
|
+
|
|
18
|
+
[Get started](./getting-started/create.md) with GraphCommerce in minutes
|
|
17
19
|
|
|
18
20
|
<figure>
|
|
19
21
|
|
|
@@ -3,6 +3,46 @@
|
|
|
3
3
|
Upgrading from GraphCommerce 5 to 6 is a major upgrade. Please follow the
|
|
4
4
|
regular [upgrade steps first](./readme.md).
|
|
5
5
|
|
|
6
|
+
1. [Migrating to graphcommerce.config.js](#migrating-to-graphcommerceconfigjs)
|
|
7
|
+
2. [Product routing changes](#product-routing-changes)
|
|
8
|
+
3. [Hygraph schema changes](#hygraph-schema-changes)
|
|
9
|
+
4. [Replace next/link with GraphCommerce's new Link behavior](#replace-nextlink-with-graphcommerces-new-link-behavior)
|
|
10
|
+
|
|
11
|
+
## Migrating to graphcommerce.config.js
|
|
12
|
+
|
|
13
|
+
GraphCommerce 6 uses a new [configuration file](../framework/config.md) called
|
|
14
|
+
`graphcommerce.config.js` this replaces the current configuration. When staring
|
|
15
|
+
a dev server, GraphCommerce will notify you how to migrate your env variables to
|
|
16
|
+
graphcommerce.config.js.
|
|
17
|
+
|
|
18
|
+
## Product routing changes
|
|
19
|
+
|
|
20
|
+
The route for the product has changed from `/product/[url]`,
|
|
21
|
+
`/product/configurable/[url]`, etc. to `/p/[url]` by default. This is a
|
|
22
|
+
singlular product page for all product types.
|
|
23
|
+
|
|
24
|
+
You can keep using the old behavior by setting
|
|
25
|
+
[legacyProductRoute](../framework/config.md#legacyproductroute-boolean) to true.
|
|
26
|
+
This legacy routing will be removed in a future version.
|
|
27
|
+
|
|
28
|
+
You can also change the product route from `/p/[url]` to something else by
|
|
29
|
+
configuring [productRoute](../framework/config.md#productroute-string)
|
|
30
|
+
|
|
31
|
+
## Hygraph schema changes
|
|
32
|
+
|
|
33
|
+
Create an enumeration in Hygraph `RowLinksVariants`:
|
|
34
|
+
|
|
35
|
+
<img width="712" alt="Schermafbeelding 2023-03-16 om 13 15 24" src="https://user-images.githubusercontent.com/1244416/225615372-1226a6a8-11c8-4939-9ea5-bb66f16c3bb3.png" />
|
|
36
|
+
|
|
37
|
+
Create a RowLinks model:
|
|
38
|
+
<img width="748" alt="Schermafbeelding 2023-03-16 om 13 15 34" src="https://user-images.githubusercontent.com/1244416/225615400-fc64c203-dce4-4971-8d21-c8777d085abe.png" />
|
|
39
|
+
|
|
40
|
+
Add RowLinks to be included in the `content` of the `Page` Model:
|
|
41
|
+
|
|
42
|
+
<img width="805" alt="Schermafbeelding 2023-03-16 om 13 21 13" src="https://user-images.githubusercontent.com/1244416/225615681-81035be8-a994-416e-bd7a-814493c132d7.png" />
|
|
43
|
+
|
|
44
|
+
After this step you should be able to run `yarn codegen`.
|
|
45
|
+
|
|
6
46
|
## Replace next/link with GraphCommerce's new Link behavior
|
|
7
47
|
|
|
8
48
|
Before GraphCommerce 6 (before Next.js 13), the next/link component needed to
|
|
@@ -32,19 +72,6 @@ function MyComponent() {
|
|
|
32
72
|
}
|
|
33
73
|
```
|
|
34
74
|
|
|
35
|
-
### Product routing changes
|
|
36
|
-
|
|
37
|
-
The route for the product has changed from `/product/[url]`,
|
|
38
|
-
`/product/configurable/[url]`, etc. to `/p/[url]` by default. This is a
|
|
39
|
-
singlular product page for all product types.
|
|
40
|
-
|
|
41
|
-
You can opt in to use the
|
|
42
|
-
[legacyProductRoute](../framework/config.md#legacyproductroute-boolean) to keep
|
|
43
|
-
the old behavior. This legacy routing will be removed in a future version.
|
|
44
|
-
|
|
45
|
-
You can also change the product route from `/p/[url]` to something else by
|
|
46
|
-
configuring [productRoute](../framework/config.md#productroute-string)
|
|
47
|
-
|
|
48
75
|
### Upgrading a Link that uses next/link props
|
|
49
76
|
|
|
50
77
|
```tsx
|