New React API Bridge usage

New Member
6 0 0

How can the new type of API Bridge construction be used in the context of the React App tutorial?

https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-int...

 

The following construction does not work - does not produce an error, just the button for picking products does not react.

<React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <AppProvider>
           <Provider shopOrigin={this.state.shopOrigin} apiKey={API_KEY}>
          <Component {...pageProps} />
          </Provider>
        </AppProvider>
      </React.Fragment>
0 Likes
Shopify Staff
Shopify Staff
11 1 2

Hi rycerz,

 

Could you provide a bit more example code? I’d like to see your imports, and where you’re using the product picker. I’d also like to see the versions specified in your package.json file.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
16 1 3
HI @rycerz! I'm updating the tutorial to use the new app bridge today and I'll let you know when it's deployed.
0 Likes
New Member
6 0 0

package.json:

{
  "name": "shopname",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node server.js",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "author",
  "license": "ISC",
  "dependencies": {
    "@shopify/app-bridge-react": "^1.6.7",
    "@shopify/koa-shopify-auth": "^3.1.30",
    "@shopify/koa-shopify-graphql-proxy": "^3.1.1",
    "@shopify/koa-shopify-webhooks": "^1.1.11",
    "@shopify/polaris": "^3.20.0",
    "@zeit/next-css": "^1.0.1",
    "apollo-boost": "^0.4.3",
    "dotenv": "^8.0.0",
    "graphql": "^14.4.2",
    "graphql-tag": "^2.10.1",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.0",
    "koa": "^2.7.0",
    "koa-router": "^7.4.0",
    "koa-session": "^5.12.2",
    "next": "^9.0.2",
    "react": "^16.8.6",
    "react-apollo": "^2.5.8",
    "react-dom": "^16.8.6",
    "store-js": "^2.0.4"
  }
}

_app.js:

import App, {Container} from 'next/app';
import { ApolloProvider } from "react-apollo";
import ApolloClient from 'apollo-boost';
//import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider } from "@shopify/app-bridge-react";
import '@shopify/polaris/styles.css';
import Cookies from 'js-cookie';

const client = new ApolloClient({
  fetchOptions: {
    credentials: 'include'
  },
});

class MyApp extends App {
    state = {
        shopOrigin: Cookies.get('shopOrigin'),
      };
  render() {
    const { Component, pageProps } = this.props;
    const config = {apiKey: API_KEY, shopOrigin: this.state.shopOrigin};
    return (
      <Container>
        <AppProvider>
          <Provider
            config={config}>
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </Provider>
        </AppProvider>
      </Container>
    );
  }
}

export default MyApp;
0 Likes
New Member
6 0 0

It would be perfect, please let me know once it's ready.

0 Likes