search

btahir / next-shopify-starter

Nextjs + Tailwind CSS + Shopify Starter
https://doggystickers.vercel.app
MIT License
777 stars 261 forks source link

API Routes not needed #3

Closed junaid33 closed 3 years ago

junaid33 commented 3 years ago

Thanks for the amazing project. I'm playing around with it and noticed you're using API routes for create and update the checkout. You don't need to use API routes since these calls can be made in the frontend. Any calls using the storefront token can be made client side. Calls using the Shopify Admin API need to made using the server so the API routes.

The reason I point this out is because using the API routes creates a little latency when adding the first item to the cart.

btahir commented 3 years ago

Hey - you're right not sure why I did that haha. Thanks for pointing it out. I don't have my store running currently so I don't want to make the change since I can't validate it. Hopefully will make the update in the future. Thanks!

btahir commented 3 years ago

Ok - I have my store back up and can finally test this. Turns out we need to cal these functions server side after all. The reason is that we need our sensitive env variables (that we do not want to expose client side) to access checkout. You can see these at the top of the shopify.js file in the lib folder.

const domain = process.env.SHOPIFY_STORE_DOMAIN
const storefrontAccessToken = process.env.SHOPIFY_STORE_FRONT_ACCESS_TOKEN
const collection = process.env.SHOPIFY_COLLECTION

UPDATE: maybe we can make these variables public after all. I am not sure how sensitive the storefront access token is. That's the only variable I was concerned needed to be private but it seems it is an unauthenticated API.

junaid33 commented 3 years ago

Yes if you look at Shopify's storefront examples: https://github.com/Shopify/storefront-api-examples/tree/master/react-apollo, they expose the StoreFront Access Token client side.

btahir commented 3 years ago

Makes sense. Updated. Thanks for the feedback!