How to pass URL Parameters to App Pages

birdhouse
Visitor
1 0 0

Hey there, 

 

i am pretty new to creating Shopify Apps and React as well. I am using the boilerplate from shopify-cli and I am trying following: 

 

I have a page which uses the api to list all my products in a Resource List. In a Resource List Item you can pass a URL. So my plan was to add a new Page which is called "productdetail" and pass the product id to it (/productdetail/12345).

Then the Id should be passes to a component which is getting the product details for this specific product with an api. 

 

The "productdetail" page is looking like this: 

 

import { EmptyState, Page, Frame, Loading } from "@shopify/polaris";
import ProductPage from "./components/productPage";



const ProductCard = () => (
  <Frame>
        <ProductPage id="12345"/>

  </Frame>
)

export default ProductCard;

As long as I am passing the id "manually" all is working fine. 

 


But since I am unfamiliar with how the koa-routes working in that boilerplate I can not pass the id in the URL. 
If I am calling "/productdetail/12345" I am getting a 404 because the page is not known. I think that is clear to me because my router do not have a productdetail route with an parameter.

 

This is how my route looks: 

.get("*", verifyRequest(), async ctx => {
    await handle(ctx.req, ctx.res);
  
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

And my _app.js

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

const client = new ApolloClient({
  fetchOptions: {
    credentials: "include"
  }
});
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    
    const shopOrigin = Cookies.get("shopOrigin");
    return (
      <Container>
        <AppProvider i18n={translations}>
          <Provider
            config={{
              apiKey: API_KEY,
              shopOrigin: shopOrigin,
              forceRedirect: false
            }}
          >
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </Provider>
        </AppProvider>
      </Container>
    );
  }
}

export default MyApp;

Can someone give me a hint what I do have to change to point the URL to that page and pass the id parameter dynamically in the Component argument? 

 

Thanks a lot!

Replies 3 (3)

SBD_
Shopify Staff
1829 269 405

Hey @birdhouse 

 

Try creating an API route: https://nextjs.org/docs/api-routes/introduction

Scott | Developer Advocate @ Shopify 

mayurc137
Shopify Partner
9 1 5

First you will have to create a file page/productdetail/[pid].js

And your page/productdetail/[pid].js should look like this ->

 

 

import { EmptyState, Page, Frame, Loading } from "@shopify/polaris";
import ProductPage from "./components/productPage";
import { useRouter } from 'next/router'

const ProductCard = () => {
    const router = useRouter()
    const { pid } = router.query

    return (
        <Frame>
            <ProductPage id={pid}/>
        </Frame>
    )
}

export default ProductCard

 

 

 

- Want to embed Instagram Stories on your store? Install our Instagram Stories & Highlights App
- Have more questions? Feel free to email me.
- My reply helped? Click Like to show me some love!
Tonegolf71
Shopify Partner
11 0 5

I'm wrestling with something similar here, but having followed the tutorials (https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react) that seem to use classes for pages, I'm having issues getting this URL parameter as the Router is a hook? ...and I'm discovering that is a no-no.

I'm pretty much on the same code as the tutorial right now with the following class in _app.js...

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: false };
    return (
      <React.Fragment>
        <Head>
          <title>POC</title>
          <meta charSet="utf-8" />
        </Head>
          <Provider config={config}>
            <ClientRouter />
            <AppProvider i18n={translations}>
              <ApolloProvider client={client}>
                <Component {...pageProps} />
              </ApolloProvider>
            </AppProvider>
          </Provider>
      </React.Fragment>
    );
  }
}

 

The ClientRouter contains what I need (see: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with... ), but I want to access it in my dynamic page that is a child of the Component object (and also a class extending React.Component). Is there a way to expose what I want and pass it down in props? Or is there a better way?

Forgive me if my terminology is a bit off, I'm getting up the curve in React.