@shopify/hydrogen 0.8.2 → 0.8.3
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/dist/esnext/entry-server.js +5 -12
- package/dist/esnext/hooks/useShopQuery/hooks.d.ts +3 -1
- package/dist/esnext/hooks/useShopQuery/hooks.js +7 -5
- package/dist/esnext/utilities/log/log.js +6 -1
- package/dist/esnext/version.d.ts +1 -1
- package/dist/esnext/version.js +1 -1
- package/dist/node/version.d.ts +1 -1
- package/dist/node/version.js +1 -1
- package/package.json +3 -2
|
@@ -84,7 +84,7 @@ const renderHydrogen = (App, hook) => {
|
|
|
84
84
|
});
|
|
85
85
|
let didError;
|
|
86
86
|
const head = template.match(/<head>(.+?)<\/head>/s)[1];
|
|
87
|
-
const { pipe
|
|
87
|
+
const { pipe } = renderToPipeableStream(React.createElement(Html, { head: head },
|
|
88
88
|
React.createElement(ReactApp, { ...state })), {
|
|
89
89
|
onCompleteShell() {
|
|
90
90
|
/**
|
|
@@ -135,11 +135,7 @@ const renderHydrogen = (App, hook) => {
|
|
|
135
135
|
});
|
|
136
136
|
const streamTimeout = setTimeout(() => {
|
|
137
137
|
const errorMessage = `The app failed to stream after ${STREAM_ABORT_TIMEOUT_MS} ms`;
|
|
138
|
-
log.
|
|
139
|
-
if (dev && response.headersSent) {
|
|
140
|
-
response.write(getErrorMarkup(new Error(errorMessage)));
|
|
141
|
-
}
|
|
142
|
-
abort();
|
|
138
|
+
log.warn(errorMessage);
|
|
143
139
|
}, STREAM_ABORT_TIMEOUT_MS);
|
|
144
140
|
};
|
|
145
141
|
/**
|
|
@@ -161,7 +157,7 @@ const renderHydrogen = (App, hook) => {
|
|
|
161
157
|
});
|
|
162
158
|
let didError;
|
|
163
159
|
const writer = new HydrationWriter();
|
|
164
|
-
const { pipe
|
|
160
|
+
const { pipe } = renderToPipeableStream(React.createElement(HydrationContext.Provider, { value: true },
|
|
165
161
|
React.createElement(ReactApp, { ...state })), {
|
|
166
162
|
/**
|
|
167
163
|
* When hydrating, we have to wait until `onCompleteAll` to avoid having
|
|
@@ -184,10 +180,7 @@ const renderHydrogen = (App, hook) => {
|
|
|
184
180
|
},
|
|
185
181
|
});
|
|
186
182
|
const renderTimeout = setTimeout(() => {
|
|
187
|
-
|
|
188
|
-
didError = new Error(errorMessage);
|
|
189
|
-
log.error(errorMessage);
|
|
190
|
-
abort();
|
|
183
|
+
log.error(`The app failed to render RSC after ${STREAM_ABORT_TIMEOUT_MS} ms`);
|
|
191
184
|
}, STREAM_ABORT_TIMEOUT_MS);
|
|
192
185
|
};
|
|
193
186
|
return {
|
|
@@ -248,7 +241,7 @@ async function renderApp(ReactApp, state, log, isReactHydrationRequest) {
|
|
|
248
241
|
function renderAppFromBufferedStream(app, log, isReactHydrationRequest) {
|
|
249
242
|
return new Promise((resolve, reject) => {
|
|
250
243
|
const errorTimeout = setTimeout(() => {
|
|
251
|
-
|
|
244
|
+
log.warn(`The app failed to SSR after ${STREAM_ABORT_TIMEOUT_MS} ms`);
|
|
252
245
|
}, STREAM_ABORT_TIMEOUT_MS);
|
|
253
246
|
if (isWorker) {
|
|
254
247
|
let isComplete = false;
|
|
@@ -8,7 +8,7 @@ export interface UseShopQueryResponse<T> {
|
|
|
8
8
|
/**
|
|
9
9
|
* The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
|
|
10
10
|
*/
|
|
11
|
-
export declare function useShopQuery<T>({ query, variables, cache, }: {
|
|
11
|
+
export declare function useShopQuery<T>({ query, variables, cache, locale, }: {
|
|
12
12
|
/** A string of the GraphQL query.
|
|
13
13
|
* If no query is provided, useShopQuery will make no calls to the Storefront API.
|
|
14
14
|
*/
|
|
@@ -17,4 +17,6 @@ export declare function useShopQuery<T>({ query, variables, cache, }: {
|
|
|
17
17
|
variables?: Record<string, any>;
|
|
18
18
|
/** An object containing cache-control options for the sub-request. */
|
|
19
19
|
cache?: CacheOptions;
|
|
20
|
+
/** A string corresponding to a valid locale identifier like `en-us` used to make the request. */
|
|
21
|
+
locale?: string;
|
|
20
22
|
}): UseShopQueryResponse<T>;
|
|
@@ -6,12 +6,12 @@ import { getConfig } from '../../framework/config';
|
|
|
6
6
|
/**
|
|
7
7
|
* The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
|
|
8
8
|
*/
|
|
9
|
-
export function useShopQuery({ query, variables = {}, cache = {}, }) {
|
|
9
|
+
export function useShopQuery({ query, variables = {}, cache = {}, locale = '', }) {
|
|
10
10
|
if (isClient()) {
|
|
11
11
|
throw new Error('Shopify Storefront API requests should only be made from the server.');
|
|
12
12
|
}
|
|
13
13
|
const body = query ? graphqlRequestBody(query, variables) : '';
|
|
14
|
-
const { request, key } = createShopRequest(body);
|
|
14
|
+
const { request, key } = createShopRequest(body, locale);
|
|
15
15
|
const { data, error: fetchError } = useQuery(key, query
|
|
16
16
|
? fetchBuilder(request)
|
|
17
17
|
: // If no query, avoid calling SFAPI & return nothing
|
|
@@ -52,8 +52,9 @@ export function useShopQuery({ query, variables = {}, cache = {}, }) {
|
|
|
52
52
|
}
|
|
53
53
|
return data;
|
|
54
54
|
}
|
|
55
|
-
function createShopRequest(body) {
|
|
56
|
-
|
|
55
|
+
function createShopRequest(body, locale) {
|
|
56
|
+
var _a;
|
|
57
|
+
const { storeDomain, storefrontToken, graphqlApiVersion, locale: defaultLocale, } = useShop();
|
|
57
58
|
const url = `https://${storeDomain}/api/${graphqlApiVersion}/graphql.json`;
|
|
58
59
|
return {
|
|
59
60
|
request: new Request(url, {
|
|
@@ -61,9 +62,10 @@ function createShopRequest(body) {
|
|
|
61
62
|
headers: {
|
|
62
63
|
'X-Shopify-Storefront-Access-Token': storefrontToken,
|
|
63
64
|
'content-type': 'application/json',
|
|
65
|
+
'Accept-Language': (_a = locale) !== null && _a !== void 0 ? _a : defaultLocale,
|
|
64
66
|
},
|
|
65
67
|
body,
|
|
66
68
|
}),
|
|
67
|
-
key: [storeDomain, graphqlApiVersion, body],
|
|
69
|
+
key: [storeDomain, graphqlApiVersion, body, locale],
|
|
68
70
|
};
|
|
69
71
|
}
|
|
@@ -58,7 +58,12 @@ export function logServerResponse(type, log, request, responseStatus) {
|
|
|
58
58
|
: responseStatus >= 300
|
|
59
59
|
? lightBlue(responseStatus)
|
|
60
60
|
: green(responseStatus);
|
|
61
|
-
const
|
|
61
|
+
const fullType = type === 'str'
|
|
62
|
+
? 'streaming SSR'
|
|
63
|
+
: type === 'rsc'
|
|
64
|
+
? 'server components'
|
|
65
|
+
: 'buffered SSR';
|
|
66
|
+
const styledType = italic(pad(fullType, ' '));
|
|
62
67
|
const paddedTiming = pad((getTime() - request.time).toFixed(2) + ' ms', ' ');
|
|
63
68
|
const url = type === 'rsc'
|
|
64
69
|
? decodeURIComponent(request.url.substring(request.url.indexOf('=') + 1))
|
package/dist/esnext/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const LIB_VERSION = "0.8.
|
|
1
|
+
export declare const LIB_VERSION = "0.8.3";
|
package/dist/esnext/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const LIB_VERSION = '0.8.
|
|
1
|
+
export const LIB_VERSION = '0.8.3';
|
package/dist/node/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const LIB_VERSION = "0.8.
|
|
1
|
+
export declare const LIB_VERSION = "0.8.3";
|
package/dist/node/version.js
CHANGED
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public",
|
|
5
5
|
"@shopify:registry": "https://registry.npmjs.org"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.8.
|
|
7
|
+
"version": "0.8.3",
|
|
8
8
|
"description": "Modern custom Shopify storefronts",
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"main": "dist/esnext/index.js",
|
|
@@ -72,6 +72,7 @@
|
|
|
72
72
|
"babel-loader": "^8.2.2",
|
|
73
73
|
"cpy-cli": "3.1.1",
|
|
74
74
|
"mkdirp": "^1.0.4",
|
|
75
|
+
"npm-run-all": "^4.1.5",
|
|
75
76
|
"postcss": "^8",
|
|
76
77
|
"raw-loader": "^4.0.2",
|
|
77
78
|
"rimraf": "^3.0.2"
|
|
@@ -99,5 +100,5 @@
|
|
|
99
100
|
"react-ssr-prepass": "^1.4.0",
|
|
100
101
|
"vite-plugin-inspect": "^0.3.6"
|
|
101
102
|
},
|
|
102
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "9c591cfc4bc149a6b808aaec68366cbad06fdb79"
|
|
103
104
|
}
|