Questions and discussions about using the Shopify CLI and Shopify-built libraries.
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!
Hey @birdhouse
Try creating an API route: https://nextjs.org/docs/api-routes/introduction
Scott | Developer Advocate @ Shopify
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
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.