@gadgetinc/react-shopify-app-bridge
Advanced tools
Comparing version
@@ -19,4 +19,6 @@ /// <reference types="react" /> | ||
isAuthenticated: boolean; | ||
/** Is the app being rendered outside of a Shopify admin flow, this only applies if type is set to AppType.Embedded. e.g. navigating to this page through a link */ | ||
isRootFrameRequest: boolean; | ||
}; | ||
export declare const GadgetAuthContext: import("react").Context<GadgetAuthContextValue>; | ||
export declare const useGadget: () => GadgetAuthContextValue; |
@@ -11,2 +11,3 @@ "use strict"; | ||
appBridge: null, | ||
isRootFrameRequest: false, | ||
}); | ||
@@ -13,0 +14,0 @@ const useGadget = () => (0, react_1.useContext)(exports.GadgetAuthContext); |
@@ -51,3 +51,3 @@ "use strict"; | ||
// inner component that exists in order to ask for the app bridge | ||
const InnerGadgetProvider = (0, react_2.memo)(({ children, forceRedirect, isEmbedded, gadgetAppUrl, originalQueryParams, api }) => { | ||
const InnerGadgetProvider = (0, react_2.memo)(({ children, forceRedirect, isEmbedded, gadgetAppUrl, originalQueryParams, api, isRootFrameRequest }) => { | ||
const appBridge = (0, react_2.useContext)(context_1.AppBridgeContext); | ||
@@ -60,2 +60,3 @@ const [context, setContext] = (0, react_2.useState)({ | ||
appBridge, | ||
isRootFrameRequest: false, | ||
}); | ||
@@ -109,3 +110,3 @@ (0, react_2.useEffect)(() => { | ||
(0, react_2.useEffect)(() => { | ||
if (!runningShopifyAuth) | ||
if (!runningShopifyAuth || isRootFrameRequest) | ||
return; | ||
@@ -123,3 +124,3 @@ // redirect to gadget app root pages url with oauth params | ||
}, [appBridge, gadgetAppUrl, isEmbedded, originalQueryParams, runningShopifyAuth]); | ||
const loading = forceRedirect || runningShopifyAuth || sessionFetching; | ||
const loading = (forceRedirect || runningShopifyAuth || sessionFetching) && !isRootFrameRequest; | ||
(0, react_2.useEffect)(() => { | ||
@@ -133,2 +134,3 @@ return setContext({ | ||
error, | ||
isRootFrameRequest, | ||
}); | ||
@@ -154,2 +156,4 @@ }, [loading, isEmbedded, appBridge, isAuthenticated, error]); | ||
const inDestinationContext = isEmbedded == ((type ?? AppType.Embedded) == AppType.Embedded); | ||
// We need to inform developers if the component is being rendered in a non embedded context when it should be AND we're not in an interstitial installation state. This is determined for now by the absence of both hmac and shop. This will generally occur when someone visits the app url while not in the Shopify admin. | ||
const isRootFrameRequest = !query?.has("hmac") && !query?.has("shop") && (type ?? AppType.Embedded) == AppType.Embedded; | ||
const forceRedirect = isReady && !(0, lodash_1.isUndefined)(host) && !inDestinationContext; | ||
@@ -164,3 +168,3 @@ const gadgetAppUrl = new URL(api.connection.options.endpoint).origin; | ||
let app = (react_2.default.createElement(react_1.Provider, { value: api.connection.currentClient }, | ||
react_2.default.createElement(InnerGadgetProvider, { forceRedirect: forceRedirect, isEmbedded: isEmbedded, gadgetAppUrl: gadgetAppUrl, api: api, originalQueryParams: originalQueryParams }, children))); | ||
react_2.default.createElement(InnerGadgetProvider, { forceRedirect: forceRedirect, isEmbedded: isEmbedded, gadgetAppUrl: gadgetAppUrl, api: api, originalQueryParams: originalQueryParams, isRootFrameRequest: isRootFrameRequest }, children))); | ||
// app bridge provider seems to prevent urql from sending graphql requests when it cannot communicate using postMessage when not embedded so we must skip using the app bridge provider on the very first redirect from shopify | ||
@@ -167,0 +171,0 @@ if (host && (!isInstallRequest || inDestinationContext)) { |
{ | ||
"name": "@gadgetinc/react-shopify-app-bridge", | ||
"version": "0.2.4", | ||
"version": "0.2.5", | ||
"source": "src/index.ts", | ||
@@ -5,0 +5,0 @@ "main": "dist/src/index.js", |
@@ -99,3 +99,3 @@ <div align="center"> | ||
function ProductManager() { | ||
const { loading, appBridge } = useGadget(); | ||
const { loading, appBridge, isRootFrameRequest, isAuthenticated } = useGadget(); | ||
const [, deleteProduct] = useAction(api.shopifyProduct.delete); | ||
@@ -123,3 +123,5 @@ const [{ data, fetching, error }, refresh] = useFindMany(api.shopifyProduct); | ||
{loading && <span>Loading...</span>} | ||
{!loading && | ||
{/* A user is viewing this page from a direct link so show them the home page! */} | ||
{!loading && isRootFrameRequest && <div>Welcome to my cool app's webpage!</div>} | ||
{!loading && isAuthenticated && | ||
data.map((product) => ( | ||
@@ -126,0 +128,0 @@ <button |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
34232
7.71%239
3.46%139
1.46%