Add a simple page to list a few products from a GraphQL query.

package.json

@@ -12,16 +12,18 @@
     "devDependencies": {
         "@babel/preset-react": "^7.13.13",
         "axios": "^0.21",
-        "laravel-mix": "^6.0.6",
+        "laravel-mix": "^6.0.19",
         "lodash": "^4.17.19",
         "postcss": "^8.1.14"
     },
     "dependencies": {
         "@apollo/client": "^3.3.16",
         "@shopify/app-bridge": "^2.0.2",
+        "@shopify/app-bridge-react": "^2.0.2",
         "@shopify/app-bridge-utils": "^2.0.2",
+        "@shopify/polaris": "^6.4.0",
         "graphql": "^15.5.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^16.14.0",
+        "react-dom": "^16.14.0"
     }
 }

resources/js/react/App.jsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import createApp from "@shopify/app-bridge";
 import {Redirect} from "@shopify/app-bridge/actions";
 import {authenticatedFetch} from "@shopify/app-bridge-utils"
-import {ApolloClient, gql, HttpLink, InMemoryCache} from '@apollo/client';
-
-const TEST_QUERY = gql`query { shop {name} }`;
+import {ApolloClient, HttpLink, InMemoryCache} from '@apollo/client';
+import {ApolloProvider} from '@apollo/client/react';
+import {AppProvider} from "@shopify/polaris";
+import translations from "@shopify/polaris/locales/en.json";
+import '@shopify/polaris/dist/styles.css';
+import PageLayout from "./components/PageLayout";
+import ProductsPage from "./components/ProductsPage";
+import {Provider, useAppBridge} from '@shopify/app-bridge-react';
 
 function userLoggedInFetch(app) {
     const fetchFunction = authenticatedFetch(app);
@@ -25,13 +29,8 @@ function userLoggedInFetch(app) {
     };
 }
 
-function App({shop, host, apiKey}) {
-    const app = createApp({
-        shop: shop,
-        host: host,
-        apiKey: apiKey,
-    });
-
+function AppBridgeApolloProvider({children}) {
+    const app = useAppBridge();
     const client = new ApolloClient({
         link: new HttpLink({
             credentials: 'same-origin',
@@ -41,14 +40,26 @@ function App({shop, host, apiKey}) {
         cache: new InMemoryCache()
     });
 
-    client
-        .query({
-            query: TEST_QUERY
-        })
-        .then(result => console.log(result));
+    return (
+        <ApolloProvider client={client}>
+            {children}
+        </ApolloProvider>
+    );
+}
+
+function App({shop, host, apiKey}) {
+    const config = {apiKey: apiKey, shopOrigin: shop, host: host, forceRedirect: true};
 
     return (
-        <h1>Hello React</h1>
+        <Provider config={config}>
+            <AppProvider i18n={translations}>
+                <AppBridgeApolloProvider>
+                    <PageLayout>
+                        <ProductsPage/>
+                    </PageLayout>
+                </AppBridgeApolloProvider>
+            </AppProvider>
+        </Provider>
     );
 }
 

resources/js/react/components/PageLayout.jsx

@@ -0,0 +1,16 @@
+import {Card, Layout, Page} from "@shopify/polaris";
+import React from "react";
+
+function PageLayout({children}) {
+    return <Page>
+        <Layout>
+            <Layout.Section>
+                <Card>
+                    {children}
+                </Card>
+            </Layout.Section>
+        </Layout>
+    </Page>
+}
+
+export default PageLayout;

resources/js/react/components/ProductsList.jsx

@@ -0,0 +1,31 @@
+import {ResourceItem, ResourceList, TextStyle} from "@shopify/polaris";
+import React from "react";
+
+export function ProductsList({data}) {
+
+    const products = data.products.edges.map((edge) => {
+        return {
+            id: edge.node.id,
+            title: edge.node.title,
+        };
+    });
+    return <ResourceList
+        showHeader
+        resourceName={{singular: 'product', plural: 'products'}}
+        items={products}
+        renderItem={({id, title}) => {
+
+            return (
+                <ResourceItem
+                    id={id}
+                    accessibilityLabel={`View details for ${title}`}
+                >
+                    <h3>
+                        <TextStyle variation="strong">{title}</TextStyle>
+                    </h3>
+                </ResourceItem>
+            );
+        }}
+    >
+    </ResourceList>
+}

resources/js/react/components/ProductsPage.jsx

@@ -0,0 +1,37 @@
+import {gql, useQuery} from '@apollo/client';
+import {Banner} from '@shopify/polaris';
+import React from 'react';
+import {ProductsList} from "./ProductsList";
+import {Loading} from '@shopify/app-bridge-react';
+
+const PRODUCTS_QUERY = gql`{
+  products(first: 10) {
+    edges {
+      cursor
+      node {
+        id,
+        title,
+        onlineStoreUrl
+      }
+    }
+  }
+}`;
+
+
+function ProductsPage() {
+    const {loading, error, data} = useQuery(PRODUCTS_QUERY);
+
+    if (loading) return (
+        <Loading/>
+    );
+
+    if (error) return (
+        <Banner status="critical">
+            There was an issue loading products.
+        </Banner>
+    );
+
+    return <ProductsList data={data}/>;
+}
+
+export default ProductsPage;

routes/web.php

@@ -112,7 +112,7 @@
 
 Route::post('/graphql', function (Request $request) {
     $result = Utils::graphqlProxy($request->header(), $request->cookie(), $request->getContent());
-    return response($result->getDecodedBody())->withHeaders($result->getHeaders());
+    return response($result->getDecodedBody());
 })->middleware('shopify.auth:online');
 
 Route::get('/rest-example', function (Request $request) {

tests/Feature/ProxyGraphqlTest.php

@@ -104,7 +104,6 @@ public function testGraphqlProxyFetchesDataWithJWT(bool $isEmbedded)
 
         $response->assertStatus(200);
         $response->assertExactJson($testGraphqlResponse);
-        $response->assertHeader('response-header', 'header-value');
     }
 
     private function encodeJwtPayload(): string