An Introduction to Headless Shopify

all right, let's start our webinar today. um, again, good morning, good afternoon, good evening. depending on where you're signing in today, uh, gatsby welcomes you. um, today we're gonna be toking a little bit about, uh, headless shopify. so today's webinar is an introduction to head the shopify um and just a little housekeeping. uh, this webinar will be recorded. we'll spend an email in the next 48 hours. you'll get that recording. so if you do have to sign off, if you do have to catch something quickly, don't worry, you're still going to be able to see everything, hear everything. but we will be doing live q a. we'll have a poll as well, so feel free to stik around for some interactive communication. um, and then the other thing, too quick, is: please ask questions in the questions tab. um, it's called q a here. it's a lot easier for us on the moderating side to follow um rather than chat, which is a little free-flowing and continue to spiral out of control. um, all right, so my name is andrew geno. i run product marketing together at um. we're toking about shopify today, um, and these are kind of four things we're going to cover. we're going to cover quickly, uh, some shopify basics, what it does, how it got started and then we're really going to focus on headless versus traditional architecture and some of the benefits of that traditional or of that headless architecture versus traditional monolithic applications like shopify's broader platform, things like wordpress. and then we'll quickly tok a little bit about gatsby fits into the world here, um, how it relates to how the shopify and how you can get started, um, with benefit or with a gatsby and shopify- all right. so first quick intro about gatsby. gatsby's is an open source front end framework, uh, and also a cloud platform. with gatsby cloud, we've been around now for almost six years, uh, we have over 50 million downloads and well over 50 000 github stars. we're a very popular uh open source project and, again, we're just getting going with things like gatsby cloud and some of the other products we're bringing to market. shopify, on the other hand, has been around for a while now, um, it's actually been around, uh, since 2004.. uh, it has over half a million active businesses using the platform and its quarterly sales, uh last year, i believe in q4- was 36 billion dollars. so 36 billion dollars worth of goods were sold through the shopify platform by businesses, individual entrepreneurs, um, all sorts of folks using the shopify, from large um to small, and what does shopify really do? they made selling items online easy. so for the past 20 years there's been this e-commerce revolution going on: vendors, brick and mortar stores bringing their uh wares to the digital uh frontier um, and also just individual stores popping up uh left and right to sell small items, affiliate marketing- everything got really popular in the last 20 years and shopify was the one to make selling uh your items uh really easy again. no matter if you were a large customer or a small customer. you could get set up on shopify's platform and build your own amazon. you could put in your items and start selling just as a big box realtor code. it gave you all the tools that you would need: things like product catalogs, things like order tracking, shipping metrics, which we'll tok about. all this came out of the box in the shopify platform and it allowed you to sell anything. you could become a soccerpreneur, you could become whatever you really wanted to sell um, even services. you could go through shopify. so it became like the blogging side for wordpress. it became that for e-commerce um, and it has some awesome tools in the back end as well to measure all of your sales. it has dashboarding, analytiks. it has customer tracking. it has, again, catalog management. all of these things come really out of the box um with shopify's powerful platform. whether you're on the free tier or their plus, you're going to get a lot of these out of the box um. but all this comes kind of with the trepidation of a lock-in on a single vendor um. so scaling shopify uh can be tough, and we're not toking about scaling shopify as in uh performance here, although we will later. we're really toking about scaling shopify across your business. so can shopify scale across the content that you need to produce, the development that you might have in app versus your e-commerce business um, the features that your customers are constantly asking for, your marketing, your business systems as you grow larger and you have more fulfillment things? can it integrate with that fancy erp system you have? or those legacy databases that you might have attached to another business? these are all the things where locking yourself into a single vendor um, even one as prolific as shopify, you can really start hitting this wall. you're going to get your business to a certain size and then you're going to need to look um outward, and that's where a headless shopify can really come in and start helping. we've used this word headless. sometimes it's composable, but it's all about kind of taking apart the layers here and it. this is a term that is increasing in popularity, so i'm sure you've seen it more and more and it's becoming the predominantly um modern way to build an e-commerce store, and not even for businesses that are large and hit a wall, this is becoming the predominant way to build your shopify business today, with a headless cms had the shopify and then a front-end framework attached to it. so what is headless? let's tok about a little bit more than just the lego person without a head um. and to do that we'll first actually look at some traditional implementation patterns. so head list is the new way. let's look at the old way to kind of compare along that and get ourselves a firm footing. so the traditional architecture has some content or data written and that data is in a back end system that is attached to this front end. and this box right here is really the crux of the entire situation, where the back end of the front end sit in this black box. there are many things in between, but the problem is that black box controls a lot of the interaction between it. it controls the plug-ins um. it controls the interaction, the features that are going to come along with the tying of the back and front end, and it's going to be slowed down in the system. now this compounds even more when you have multiple systems right. so if you have multiple traditional monolithic systems and you add on functionality that one may not have that kind of means, you need this whole different system to be maintained. and here, uh, it's kind of getting confusing with system a, system b, system c all having their own back end and front end, all kind of having their own uh content architecture. but it really starts to make sense once you see this franken web and this is a common practike between, uh, any size company. for the past 20 years they've often had multiple sub-domains that have tracked multiple tiknologies. so these are multiple tiknologies and closed-loop traditional systems, um that need to be used kind of separately. so to do that in the past we've done maybe a sub-domain. so we have storedomaincom and that store maybe is a shopify implementation. it's going to get rerouted through the dns to either store or you can do something more complicated like reverse proxy um and get it to go into like domaincom. but either way it's a whole separate system. it has a separate database. you're going to enter items into that database, differently than your other things. it's going to handle a lot of the things that are core too, like an e-commerce implementation- so product catalog, the shopping cart, the payment, maybe some shipping type things uh, promotions, promotional codes, um, all these things uh are normal to any e-commerce experience and they're things that in the past have either been custom implementation that has taken a really long time to implement, or they've been the single threaded platforms like, again, shopify, woocommerce, commerce. they've all trad.

Headless Shopify Tour - Gatsby + Prismic + Shopify

hey guys, tim here from clean commit. so around 18 months ago, we were commissioned to build a headless shopify store. uh, unfortunately for the fresh online team, the pandemic was raging at that point and economic shift had a fairly significant impact on their business and they decided to wrap up the project rather than continue. but the silver lining is that they gave me permission to showcase the project and use it as a bit of like a demo site, i suppose. so this is good news for you guys, because if you're considering modifying your store to be headless, then you've probably maybe you've- poked around some stores where they've already gone through the transition, but you don't really know what it looks like from the uh administrative perspective. so i mean, what? what does it look like when we change shopify to run headless? how do you manage products? how do you write content? there's big questions that you really want answered before you dive into this kind of upgrade, and i mean the. the benefits of going headless are pretty strong. you um, you increase your site performance significantly, which can be a problem for older and larger shopify stores, especially if you're running a number of plugins. same goes for big commerce or any other ecommerce engine. so, moving to a headless architecture where you're just consuming the information by api and you're using something like gatsby or next as a front-end framework to statikally generate a lot of the content, means that the page is load really quick, which i'll show you in a second. it also means that, um, you've now got access to these react-based front-end frameworks or whatever kind of framework that you want to use and you can. you can build pretty much whatever you want, like you've. you effectively turned your shopify store into an application, so you're still using shopify to manage the products and pull the information through. but if you want to create a completely customized checkout wizard where you take your customer through and ask them questions and then use those inputs to provide recommendations or generate, i don't know, like customize stuff that's specific to that user, so they feel special and they feel heard, then that's completely on the table and that's those kind of creative directions with um, with a shopify store, are things that you really can't do. when you're just using a monolithic theme. i mean you, you might be able to, but it would be a huge amount of development, it's um, it's not manageable and it really can't be scaled. so i mean there's other benefits of going headless. but that's not really what i'm here to tok about. what i want to show you guys in this brief video is what this store, this headless store, looks like, and then some of the big differences that you notike between um just in the day-to-day use of of this store, compared to a regular monolithic shopify up. so let's just take a quick browse around the store and i'll start with um, just saying: don't look too carefully into the design. we did make this look a bit nicer when it was originally developed and then the fresh online guys changed the images a bit. but that's part of the appeal of the headless store and the way that we've configured it, because all of the content is completely manageable. so i'll show you the content management system in a second. but you can change these headlines, you can change the text here, you can change the text on the button. we built a little widget in here that checks whether these guys can deliver to your area. so i'm actually outside of their postcode at the moment, so they wouldn't be able to deliver to me. so, looking at these products, these images, names, prices and weights are all pulled through the shopify api and then they land in gatsby and they're styled to look like this. but if you change things in shopify, if you change these images or product meta, then they'll be reflected on the website. um, gatsby, i won't get into the tiknicalities, but it takes a minute or two to process those changes. so, unlike something like shopify or wordpress, where you hit the publish button and then it's done instantly, it takes a minute for the changes to show up. so, yeah, so this is the the customer view. now, what i want to show you is just how quick it is to browse around this store. um, and i can't- i can't- emphasize the importance of page load speed. enough customers are. they're skeptikal and they're impatient. so if you don't give them a reason to think that you're untrustworthy, if you look trustworthy and you don't make them wait, uh, then you're going to have a good time and it's going to have a fairly significant impact on your conversion rate. so we built these cool little custom filters in here so you can go through all of the products. so all of the products are loaded. when the user first lands on the site, they're cased, um, and then they can jump through and find whatever they need. uh, this would be different if you had a massive library, a ton of skus, but um or products, but it's, it's a similar system. so, um, we, it can be configured so it's really quick for the user to jump through and find which product they want. so i think they've actually turned the blog content off in here. so we'll have a look in a second at um, what it looks like from the administrative perspective to write content. let's do that now. so this shopify store is set up with gatsby, as i mentioned a second ago. so you can see in here, gatsby is a react framework and react is the javascript framework written by facebook very popular. so we've integrated this with prismic and prismic is a headless content management system. the layout looks somewhat familiar for anyone who's used content management systems before. looks very different from shopify, um, and you're probably thinking that it looks a little unstructured because we've got like the about page and the policy page and the shop page, like what's going on here. well, uh, in prismic you use types, um tags and you can do authors if you, if you're using uh blog content. but types and tags are the the big kind of categorization. so, and collections as well, i think. so collections, we'll have a look at the artikles. so if i go into collection and filter by artikle- okay, these guys have no blog artikles, so let's create, um, a blog post now. um, okay, so i have to put a title in. this is a test post. uh, okay, so the slug is generated automatikally. there's a thumbnail in here where we could go and add an image. so, oh, cows here, let's do that because great, um, you can put your alt text in here. this is important for seo. this is important, or seo. date of publication today. author link: uh, i think, okay, this is just a, uh, lorem ipsum author configuration that we set up. but if you guys have a, if you have a content team and you want to nominate which author has written the post- which is a really cool way to do it, um, because it looks, it looks really tidy and professional to nominate an author- then you can pick them from the list, you can write an excerpt and then into the content. so this is where the content goes, um, and then we can add, we can embed stuff if you want. if you want a youtube link, um, or we can add an image so we can add another picture of a cow or lady. chop in some meat. let's add this steak looks pretty good, so then we put oh text here. prismac works with these um. they're kind of like blocks, so if you want to put an image in in then you need to go and jump over it and continue writing down here. so this is the process for putting content in um with prism, but makes pretty nice to write content with the editor. i'll just zoom out a bit because i'm zoomed in quite close. the edit is nice and easy to use. um. this is a. this is in direct contrast to using something like um, to the regular shopify setup where, if you were to do this, you come into blog posts and then add a blog post and it's like similar process, but it just looks a bit nicer and the um, the multi-author functionality, is a bit tighter um. so yeah, i don't know, not in a huge different system. nicer experience and um easier to write.

More:The MOST Powerful WORDS in Real Estate - Close MORE real estate DEALS Today

5 Lessons I Learned About Headless Commerce So You Didn’t Have To with Shopify's Victoria Duggan

hey, campers, i hope you're having a wonderful day. i'm victoria from shopify and i'm just kicking back relaxing at my campsite. i hope you can feel more ideas as well when i tell you the five lessons that i've learned about headless commerce, so that you don't have to now that we're back indoors, let's discuss. headless commerce is not exactly the right term for what we're toking about here, but has been popularized so i will be using it. what we're toking about is decoupled architecture, so you actually usually have multiple heads, especially if you're doing omnichannel. managing multiple systems can get complex really, really fast. so that brings us to lesson number one: offload complexity, where you can offload about eighty percent of what you need to build and spend the twenty percent building what makes your business unique and stand out from the crowd. shopify is built for e-commerce, so let us handle what we do best. this gives you the development cycles back to build something unique, to connect with your customers and to stop worrying about ecommerce capabilities and scale. shopify has one of the highest traffic graphql apis in the world and we've been doing headless commerce since way before it was called headless commerce. in order to do headless on shopify, you'll be using what we call the storefront api. if you're not familiar with the storefront api, the storefront api is a graphql api, that's framework agnostik. this means you can use it in all of your projects, not just on web, so this could be mobile apps, video games, fridge apps- i mean the list goes on- where you can put commerce. it programmatikally gives you access to your customers, collections and a lot of other commerce capabilities like complex shipping, discounting, creating a checkout and so on, essentially allowing you to meet your customers where they are. i've had the unique experience of working with hundreds of different brands deciding to go headless. i help work with their team to decide and vet if headless commerce is the right fit and, if it is, i help guide them through the development cycles in order to build these experiences. this has allowed me unique insight into the success and also the failures, so i'm happy to be able to provide the five key lessons i've learned from this. offloading complexity is the one that comes up the most. i think a lot of times, headless commerce is underestimated how much work it can be when you're building an actual, scalable e-commerce project. that, you know, is not just like fooling around with a couple products. if you're able to offload the complexity of the e-commerce capabilities specifically, so letting shopify handle that. it allows you to build what you need to build, but letting us handle the difficult aspects so that it runs smoothly when you're actually in production. for example, let's dive into a very rudimentary product page and decide just how complex it is. so i just spun up this site on gatsby called the gatsby camping store and let's take a look. so let's take a look at a basic product page here. this is pretty rudimentary and i just spun this up. as you can see, this is probably the bare minimum that needs to go on a product page in order to sell successfully. so right now i'm saying the currency is canadian because, hello, i am in canada in order to set up the fact that in the future, i will very likely want multi-currency, which shopify does support. here i have the quantity and add to cart. i'm also looking at reviews. so typically on a shopify site, your reviews might be like an application that you just add from the app store with head list. you will need to connect and build that integration yourself with the apis available on this. i am pulling external information from a cms, so i have the translations coming for a cms- and they're in french- also likely have variants and those variants would update the photos as well. so just from this simple example we can see that it's not so simple to just spin it up, and some of this will need to be a combination of dynamic and statik, especially to check the inventory and add those items to cart for purchase. if we take a look on the right hand side and guess, my vs code is green and yes, it makes me happy- you'll see a fairly standard gatsby app. so with my gatsby app i am hooking up into the storefront api, the api that i mentioned from shopify, and you can see that i'm querying for products. so pretty standard graphql. here i'm asking for everything that i need on the page. so right now not too much information, just, like we said, the price and the currency code. i can continue to build out this query to get more and more complex and then on other pages i'll have different queries. this query is statikally rendered by gatsby and this happens at build time so that page load speed is optimized. anything additional that needs to be dynamic we'll be toking to shopify storefront api directly. let's hop back to our discussion. when you go headless, you're not only responsible for the app, but you're now taking on the tiknical cost of ownership for multiple different systems that you're integrating with. you also need to take into account the maintenance. i think maintenance is probably the most overlooked part of the headless build that people don't tend to plan for, so keep this in mind long term. this brings us to lesson number two: resourcing. the businesses i've worked with who had the most success planned for this. they usually took about one to ten more people for internal developers who were able to build and maintain long term their site. this might sound extreme and you might be thinking you don't need that many people, but let me just give you a few considerations of things that you might need to build that you're not planning on. first of all, many shopify merchants depend on what we call apps, so these are downloaded from the app store. they are just like integrations that can help get you up and running faster and third-party connectors, so if your business depends on these types of apps, you will need to rebuild them. so apps and integrations need to be built into the headless storefront, and this can take a lot of time and maintenance as well. it doesn't actually have to be a bad thing, though. a lot of people enjoy the control that they're able to have at that point, so they can customize that integration for how they need it and hook up into a public api endpoint that the apps and connectors have. the second one is new features. shopify is continuing to innovate and we expose that through the storefront api, but what this means is that, as a developer, you will need to go in and add those new features to your headless site. it's not a ton of work, but it will require maintenance. the third one is making good decisions for scale. so i've spoken with a lot of developers who built their website for how their business was today. they were very focused in getting all the requirements done to make successful sales exactly how it is right now. the problem with this thinking is that there's been unprecedented growth. we could never have seen the pandemic and that really changed the way shopping behavior happens online. with this kind of growth, you really have to make sure that what you built is able to scale to support it. you don't want to be thinking down the line. you need to start switching out a bunch of different third parties who aren't able to support, like flash selling traffic, and you need to make sure that you are taking that into account when you build as well. lastly, debugging can become a little bit more difficult with distributed systems, so make sure that you are taking the ownership to log everything that you're going to need in order to find and trace the bugs. this will set you up for success in the future. so take this as a bit of a cautionary tale and make sure your team is scaled up to support what you're building. but, like i said, custom building these integrations gives you great flexibility, and using a web framework that your team is familiar can accelerate developer.

More:Magento vs Shopify Pros and Cons Review Comparison

Sell Things Fast with Gatsby and Shopify - Trevor Harmon - Gatsby Days LA 2020

while our next speaker is coming up, we have Trevor Harmon, who is with Shopify, so you guys can connect later- perfect timing. so Trevor's a web developer. he's passionate about front-end development, of course, and he's been designing and developing since css-2 was a thing. I also learned that Trevor plays guitar and is the guitarist on an album called Michael borrow and the torus, which was distributed by Universal Records, so I'm sure someone here can probably find that and we can all enjoy what that sounds like. Trevor, is that better? oh, there we go. I'm like she said. my name is Trevor Harmon, I work for Shopify and I'm here to tell you how to sell thing as fast with gasps, gasping Shopify. so three point five trillion was the worldwide size of the e-commerce market. that's huge, right, and so obviously there's a huge opportunity to sell things. there is a study done that found that for every 100 milliseconds you it tastes longer to load a website, you lose 7% of your customers. so that's not seconds, that's milliseconds, right. so let's take Amazon as a case study. in 2018, they made two hundred thirty two billion dollars and their annual revenue. if you were to slow down their site by one second, according to the study, they would have made one hundred and twelve billion. that's less than half of the number they actually made. so obviously, speed is huge. I think I missed one thing. by the way, I if there's one thing you take from this tok, it's this. it's that speed is the most important thing in e-commerce, and the Gatsby is super fast. it's kind of funny because I was like wow 97 and then they're showing like hundreds earlier. I guess my Gatsby site is one of the slower ones, I don't know, but this is out of the box, right. I mean, it is super, super fast out of the box, and e-commerce it's all about speed, right. so Gatsby is one of the best frameworks you can use to get fast speed out of the box. I think Shopify is one of the best things you could use for e-commerce. I might be biased, but I'll tell you why. so three things in addition to just like good UX. number one is that Shopify is a platform, so it's not just a SAS product that you go and log into. it's also something you can build on top of. so let's say that you want to make a new shop that sells custom mechanical keyboards. well, you log in, you start making products, stuff like that. you might find that there's one thing you wish was different, one thing you wish you can tweak different. well, Shopify has PI thought of that, in the sense of they created the app ecosystem, so you could probably go find an app that does it for you. so Shopify is a platform. then you can use apps to build on top of that. the second thing is the way it's priced. it's priced to scale with your business. the goal isn't to charge you as much as we can. the goal is to help you grow your business because because we go together. and the last thing is the Shopify fulfillment network. this was announced last year and this will allow you to compete with Amazon as far as two-day shipping goes. so, say, you own a cup, this keyboard shop here in LA and you want to ship to somebody in New York. well, today's shipping, just shipping from here to New York- this is very expensive. so Shopify is creating a distributed network that you can keep your products in different places in the US and offer really fast shipping. so there's just three reasons. there's lots of reasons to love Shopify. have more reasons than that. those are just quick reasons, excuse me. so together you get a super-fast site with, my opinion, the best e-commerce platform. so we've toked a lot about different things today, but I know the thing you came to hear today is about geese. so did you know that geese are acts- excellent weeders? this is true, by the way. so, as a side hustle, geese farmers will lend their geese to other farms and the geese will weed those firms. it's crazy. also, the original golf balls were stuffed with geese feathers- goose feathers. they're handmade, super, super expensive. also, a male goose is called a gander, a group of geese is called a gaggle and a baby goose is called a Gosling. so why are we tokin about Jesus? right, it's because I want to introduce you to my friend, Derek the goose farmer. so this is Derek, he's our friend. so he owns his farm and you know business has been going pretty well. but he realized he want to get into some kind of side hustle and so he started toking to his friend who makes custom clothes and that friend said: hey, what if we, what if he did a partnership? what if you and I made really, really good down jackets together? all right, we'll call this only down and you, you provide the down, I provide the skills to make the jackets, so they together, come to you and say, okay, you know, we've heard that you can make superfast sites and you can make selling things really fast online, like: can you do this for us? so let's make them a store with Gatsby and Shopify- and as a side note, I'm just happened to be wearing my down jacket, I'm just coincidence. so- and this is not. it's not a real store, by the way. so, after some design and some toking, this is the design you come up with and you say, okay, what are the steps we got to do to build this design? well, first we got to set up a Shopify store with all the necessary options. we need to pull data from Shopify into Gatsby, use the debt data to create pages, use the Shopify provided plugin to facilitate the checkout experience and then test it. so let's tok about Shopify as part of this process, instead of toking to friends who work at Shopify. I said: what would it be like if I didn't work at Shopify? I knew nothing about Shopify, so I kind of limited myself. I didn't get on slack, I didn't tok to anybody directly and just started this process as if I was just picking up from start with. so the first question you're gonna have is: do I need to do start trial or maybe a Shopify partner accounts? now, there it is. both are good options. both are free to start with. start trial will make you choose a plan after 14 days. I it's perfect if you already know exactly what you want to sell. so if if the custom keyboards thing is your jam and you already know you want to sell that and you're ready to jump on in store, plan is great. but if you're trying to just test and play and kind of builds a Shopify partner account, it's great. it's primarily for those who want to build on top of shop. so I toked to you at Shopify guru, who's like our help people, and they said, yeah, this is a good choice for you. I signed up, I got myself a partner account and started going. so there are a couple of things you're gonna want to do. I'm not gonna go into too deep of these things, but a couple those things. one of those is the payment provider. so if you're doing a test basis, you want to set up the bogus gateway which is their way of saying test, provide test payments. this lets you test the entire process from end to end without actually having to pay real money or get real credit card or things like that. you do this by going into the, the Pam providers and looking at bogus gateway. the next thing is connecting Shopify to Gatsby. so so for this, still need to create a new private app. this will let you access the API is that you need for Gatsby. so you go to the apps, you create a new private app, you give it a name and there are two check boxes that you earned three I guess that you need to check. the first is the storefront API check box and under that are there are two as the Reid product tags and read customer tags. I call these out because when I was doing this, I didn't check them and then, when I went to build in Gatsby, I got an error that I was like: what does this mean? so if you do this, it's all better. so once you've done that, it'll spit you out an API key. this is what you're gonna use to build in Gatsby and then, once you've done that, the next step is just to create products. so let me quickly, actually let me do one thing first. in this process, there is some specific Shopify language that might be confusing that I want to explain so that when you're do,

Getting Started with GraphQL on Shopify

we've toked about graphql multiple times on this channel, but we haven't completely covered what is graphql in shopify, as well as the tools that you can use to test graphql queries and mutations. so let's do that after this intro. [Music]. so let's start this video by answering the question: what is graphql? graphql is a query language for apis and a runtime for fulfilling those queries with your existing data. in simpler terms, graphql gives you the ability to retrieve or modify an existing data from an application by making queries or mutations. so, with that said, you're probably familiar with rest. it's another way to ask or modify data from an application. one of the differences between graphql and rest- api or rest- is the amount of api endpoints. with rest, you have this, all you have this: api endpoints like product api, web hook, api, script tag, api- the list goes on, whereas with graphql, you only have this one api endpoint where you can send your http request. so, with that said, graphql is better than rest for known reasons, and one of the reasons is that graphql prevents overfetching or under fetching, which means for each request, you get the exact data that you're looking for. in rest, most requests do over fetch or under fetch. let's use the shopify api. as an example, let's say we use the following api endpoint: by using this endpoint, you get all of the products from your shopify store, including their properties and fields, or fields. so what are these properties? these are the id, the title, the body, html, the variants, the images and so on. now what if you only need the id and the title of the products? that's an example of over fetching, since we don't really need the other properties, and having these properties that we don't need can be very inefficient, not just for our application but also for shopify. in contrast to over fetching, under fetching is when you don't get enough data from a single request. let's use the same api endpoint as an example, let's say we want to get the images of the product variants, so by using the product api endpoint you can get the variance of the products. unfortunately, there are no images filled in the variance field, so we're going to do is to create another request, or http request to another api endpoint by passing the product id as well as the image id. so you see, you had to make two requests just to get the images from the variant api, and that is very inefficient. this is where graphql comes in. you create the query and then in this query, you specify the data that you only need. this is an example of a graphql query: you create an object and then specify the fields that you want to get. now i mentioned object, and that's because if you notike the structure of this object- or this example kind of looks like a json object- right, you get the main object, then inside of it it's nested by another object, then finally, the data, or you can say fields. this is how query is a structure, which makes it a little different compared to rest api. however, with graphql we have full control over our http request or queries and mutations. so you see, we not only avoided under fetching and over fetching, but we also avoided making multiple api calls. now, where do you send this graphql query language data? you can send this query to a graphql endpoint like this, as an http post request. now that i mentioned post, you're probably thinking right now: where are the get, post put and delete? in graphql there are only two actions that you can make: query and then mutations. query is the equivalent of get- this is what you're going to use if you want to retrieve something from shopify api server- whereas mutation, this is the equivalent of post put and delete. this is what you're going to use, or mutation is where you're going to use if you want to modify or delete the data from the shopify server. okay, so now that we know what is graphql, let's learn about the tools that you can use to make graphql request. the first tool that you can use is curl. if you're a big fan of curl commands, or if you want to use php, you can check out the following video where i showed you how to use curl to make graphql queries or mutations. i'll put its link in the video description below, or you can check out the icon right over here. the second tool that you can use is the graphical ide. it's an ide or integrated development environment made for testing out graphql endpoints. luckily for us, we do have a graphical explorer that we can use to play around and test graphql queries. this is shopify admin api graphical explorer. this is where you can try making queries, but unfortunately, you cannot do mutations in this app or in this explorer. if you want to build not just queries but also mutations, you will have to install the graphical app to your shopify store or shopify development store. okay, so we can just do it in the future, but for now let's just focus here. in the example that we have in the explorer here we have the following field called shop, and we are using the property name. if we execute this query using display button right over here, we will receive the following json response with a data property and in this data we get the shop and the name of the shopify store. now notike that the structure of the json response matches the structure that we set up here in the left side of the explorer. so if you add another property here- say, for example, we get the id of the shop- you will receive the json response with the same structure. now let's try to use the example that we mentioned in this video. let's use the product api here. use the products field. alright. so before we continue, there are times that a query or a field will ask you for an argument. to pass an argument, you will have to create a set of parentheses. then inside of this parenthesis, you will have to supply an argument. so, for example, let's use the first now. shopify provides a very good documentation about queries and arguments, so if you'd like to learn more about it, i highly recommend you check it out. i'll put its link in the video description below, or you can check out the. no, you can just check out the description below. though, as soon as you open the parenthesis, the graphical app will also provide you suggestions like so, and if you hover a field or an argument, it will give you the following card where you can click the same field or argument and it will open this documentation- this, this documentation, on the right side. all right, so, going back here, the first argument asks for an integer value. so if you hover this argument, as you can see, like i said, it gives you the following card: it's asking for an integer, so we can just give this um, like a number like five. so what does this mean? this mean that we want to get the first five products from our shopify store. that's the first argument. if you want to use the last, you will give it the last five products from your shopify store. okay, so, like i said, you can check out the documentation of this argument. i'll put its link in the video description below. now, since we're using a plural field- products- that's plural- we're going to need to use the edges and then node for pagination. i'm going to create a separate video for pagination, because that will just make this video very long. it's already long anyway. so inside of this we can set up the edges and nodes and then, inside of the node field, we can start getting the data, or the- yeah, the data that we need. so say, for example: um, let's use the id and then the title of the product. now, if we execute this query, we should have the following json response: and that's pretty much it. this is the first video for graphql series. in the next video we will learn about graphql mutations and we will also learn how to install the graphical app to a development store. if you enjoyed this lesson, let me know by hitting the like button and sub to the channel so you won't miss our future uploads. now, once again, thank you for watching and i will see you next time. bye.

Livestream | Pro Tips to Stay On Budget for Your Next Shopify Project

hey everyone, hello. that's my secret way to get us to test mics is to see if i can hear you say hello, awesome, let's give people, give folks a few minutes to join. uh, how's everyone's day going before we dive in? yeah, not bad, it's not bad. yeah, very hot here where we are, so, yeah, nice weather for once. uh, i'd say let's go around the horn and introduce ourselves, uh, where we work, and then also, since we're all remote, uh, where we're currently sort of working at it cool. so i guess i'll start. uh, my name is trevor heath. i lead uh the projects here at nobum from a product strategy and development standpoint. i currently work out of south orange county, california, so just between almost directly in the middle of los angeles and san diego, and i love, i love being able to work with with gatsby and especially we're working with gatsby in sunny california like it's. it's awesome, so super glad to be here. thank you awesome. oh, yeah, i'm john, uh co-founder attached with with tommy's, obviously also on the call um. i'm primarily more of a developer, um, and sort of doing the back end side of things really, uh, which has been really interesting with gatsby, and obviously shopify as well, which is toking about today. so, yeah, super excited to be on the call as well. um, i'm currently based in, obviously, the uk, um, in england, uh, not far from liverpool, which is towards the north, so not quite as a tik up as california, but let's get in there, let's catch them for it. yeah, tom hughes: uh, co-founder of attach, along with john um, mainly working on front end of projects and been working with gatsby for about two years now- early 29, early 2019, i think it was. um, i'm based, yeah, near john, uh, not too far from liverpool, so awesome. so i'm tyler barnes. i'm a staff software engineer at gatsby. uh, i've been working here for, you know, just about two years, i think, on the integrations team. so that's, you know, working on the wordpress plugin, the shopify plugin, different source plugins, as well as, you know, some some stuff on gatsby cloud. and i'm in canada, in victoria, british columbia. that's awesome. uh, hey, i'm i'm jack selwood. i'm a senior product manager here at gatsby, i think after about a year, i work with tyler on the integrations uh squad and it's been super exciting to to see and kind of help uh, the jam stack community and ecosystem grow and super excited to dig in today. um. so thanks everyone uh for joining uh today. we're gonna tok about some pro tips to help you stay on budget for your next shopify project. so we have some pros here from agencies uh- trevor, john and tom uh, who we'll tok to you more later. but before we kind of dive in, i just want you know to hear folks first sort of example of the first site they built with gatsby. like, how did you first discover gatsby and when were you like: okay, uh, we're gonna, we're gonna use gatsby for a project. now, what was that that process experience like? and uh, i guess trevor operated over to you first. cool, uh, yeah, i actually i was really lucky when it came to starting with gatsby. i was uh working with the team uh who's really popular in the javascript kind of ecosystem, which is prisma and prisma io. they they needed some extra work done on their site. they had a gatsby site already. they had some of our team come in and kind of help them and it was a perfect introduction. i was very lucky because i got to see how a bunch of other really talented engineers kind of set up that and it was primarily markdown base. uh, it was the beginning of mdx. so there was some mdx in there. uh, no, no headless cms or anything. it was pretty developer focused. but it was a wonderful starting point and i just knew right away that the flexibility you get- i, i built a lot of platforms at the time. so, like, working in react and, just like you know, uh, getting to enjoying an ecosystem that was growing- was awesome. so i, i loved it right off the bat, then started to bring it into our company for our website, and then slowly started to uh bring it into our client work, which now we- we basically look at gatsby as one of our first solutions for anything that is statik, needs performance, a lot of data, but also starting to dabble with it as a uh dynamic, uh platform builder as well. so, uh, since then i've been really lucky. so, uh, great experience. that's awesome. so if there was like one thing that you like that keeps bringing you back to gatsby, uh, you kind of- you may be alluded to it a little bit, but like, what's that one thing that keeps bringing you back? yeah, i, i think, uh, i think developer experience is like one of the key things. i, i think gatsby just really crushes it when it comes to uh, having a great community with a lot of plug-ins and a lot of like great documentation and just like i don't know. i think the people that work on gatsby and uh work with gatsby are always open to helping and coming up with new ideas. so i've never, i've never gone to a point where i'm like i can't solve this because i can't find the information or i can't find a solution, like it seems like the, the community's just built out enough. that it's. it's really empowering when you're trying to come up with new solutions and- and i love that part- and obviously just from a developer experience, uh, standpoint, like a lot of the, the features that have been built all the way up to now, gatsby cloud, like it's almost this all-in-one thing that really just you can go to gatsby, uh, you can, you know, build the infrastructure of the site and now you can even host it performantly. it's, it's, uh, it's just a great experience all around. so i think that's what keeps bringing you back. that's awesome. tom, i notiked you shaking your head when trevor was toking about dx. uh, is there anything you want to add there? no, i agree with you. i agree with a lot of what joe says in terms of developer experience as well. um, so our backgrounds- a lot of wordpress and magento and bits of other platforms- uh, so you do need to potentially know different languages and different you know things about the platforms and whatnot- whereas obviously with gatsby, we can- we can- use that same framework but build out the gen sites, ecom sites, um, all different types of sites, so it really sort of plays to that we can become experts in that rather than having to spread ourselves too thinly as well, which is really good. that's awesome. what's your favorite like maybe obscure- feature of gatsby? like as you started getting into it? um, like you're like: oh, i didn't realize on the surface i could do this. oh yeah, uh, that's a good question. um, i mean, when we first started using it, there was a lot of things that were surprising. it was like: okay, this is, yeah, this is the way it's working, this is, this is why this is. you know why it's. it's really good. um, i mean, the way gatsby cloud integrates with the number of first parties or cms's makes it really easy. we, we use data cms a lot- and the fact that it's just plug and play. really we don't need to worry too much about the setup and it is really good, um, especially like the new previews as well, which you've come along with that um, so, yeah, that's been really useful. that's awesome. uh, john, is there anything you want? so you and tom- both you know- build sites that attach digital. is there anything, actually, i guess? more specific question: who brought gatsby in first to attach digital? yeah, tom did that. uh, okay, which is a great move. uh, yeah, sort of like late 2019, we started looking at, um, what we can do with attach, taking it forward, looking at the, the landscape and looking at, you know, the platforms we were using ourselves, um, and, yeah, as soon as we did that, we did a bit of a crash course in it and went straight into our first project immediately, because we're toying up whether to do another way of press build or or try something new, and so, yeah, we took it on um, using cat spoon. it was, yeah, a very nice, uh, fresh uh, approach that i enjoyed a lot. obviously, with with the other platforms as well, we have to do quite a lot of work on the back end to sort of get things ready and get them prepped um, and sort of it always clashe.