Shopify/storefront-api-examples

Connect to yoga server

AWR14 opened this issue · 6 comments

AWR14 commented

I want to consume the storefront api in https://github.com/prisma/graphql-yoga server and then connect to my yoga server in the frontend, that way i won't expose any of my store tokens on the frontend and its still graphql goodness.

Has anyone done this before?

Hey @AWR14,

I'm not aware of any existing example projects that use graphql-yoga, but if you are able to get something up and running, additional examples are more than welcome in this repository!

It's worth noting that it's safe to expose your storefront access token to the client, since the API is "unauthenticated" by design – the API only allows consumers to fetch products, create customers and create checkouts, which are all storefront concerns :)

AWR14 commented

Hi @jamiemtdwyer

I've got POC set up and it was super easy, super fast, graphQL is immense. However, people who have stores want to display more than products and have a checkout. They want nice sliders, cool features on pages etc etc

This doesn't seem possible with the API route as no where in Admin to add these, unless you go liquid and have them in the template settings (which i don't want to do). So i'm working on stitching your API with a headless cms api so i can add all the above.

This isn't ideal as ideally would like to be able to do everything in on Admin area. Thoughts? recommendations? How do you guys see stores being built with the GraphQL Api?

gil-- commented

@AWR14 I think the problem is that the graphql storefront api is treated as a separate sales channel meaning you don't have access to any of the settings/data from the normal online store channel where you make CMS pages and change theme Settings.

It would be nice if there were some way to retrieve the online store channel cms pages info and even theme settings.

For headless Shopify, I currently go the route you are and combine with a CMS API like Netlify CMS or Contentful

Another option is making a private app which connects to the Headless API and do the cms changes there. It could even connect back to Contentful but allow the merchant to make all changes within the admin.

It would be nice if there were some way to retrieve the online store channel cms pages info and even theme settings.

Retrieving page and blog data is already supported in the Storefront API. We have no plans, at this time, to allow theme settings to be retrieved.

AWR14 commented

@rebeccajfriedman yeah thats cool and the graphql Api is immense. Just that what you get is a store process but to create a cool store you need a few more pieces that seem to be only available going the liquid route. Wouldn't really want the theme settings to be in the api anyway. Its all good though as i needed to learn how to do graphql stitching, every cloud lol

@gil-- Cool, good to know i'm on the right path. I have no problem having two admin areas. Do you have any sites you've built this way you can share the urls?

gil-- commented

@rebeccajfriedman woops thanks for the reminder about pages. Not sharing settings makes sense, I
just love the merchant-friendly Customizer UI.

@AWR14 You could maybe leverage Shogun page builder app which saves the page data as HTML in the Shopify CMS Page. You might need to include some external JS/CSS files (not sure) but this would allow admin CMS entry perhaps. And then retrieve the page contents/HTML via graphql.

As for example sites, I mainly use Gatsby where it does SSR during build/compilation and then I use Apollo Client to hydrate the client in certain key areas such as stock status or pricing. Gatsby does the schema stitching for me and has source plugins for a variety of headless CMS APIs.

I have an older open-source example https://github.com/gil--/gatsby-starter-shopifypwa and demo: https://demo.bodega.cloud/ Planning to redo the codebase later this year to use Gatsby themes and improved JS logic with tighter Netlify CMS integration. Can't really share anything beyond that.