How to run your first GraphQL query and set up afoundation for your Shopify app development journey
Before we begin, I am a Shopify Front End Developer. I have worked mostly on theme customizations, custom theme builds, building features using JavaScript and Liquid, and many more. However, recently, I wanted to step up a bit in my development game and give a shot to app development. BUT... the official Shopify documentation is a lot to deal with; they kind of force us to use their boilerplates with lots of code that makes things really hard to understand.
So after days of stumbling across the web, I somehow got an overview of how Shopify apps work in a nutshell. Finally, I was able to run my first query in my basic node App and make a change in my product admin. Yay! Let's dive in!
Before starting the tutorial, I would like you to focus on the below URL structure carefully.
You will notice a set of parameters like →
- url of shop → https://mystore.myshopify.com // for_example
- shopify syntax → /admin/oauth/authorize
- client_id=fe0710b263922ec2a5ec206dbd8cf7ac // for_example
- redirectUri = 'http://localhost:3000/auth/shopify/callback'; for_example
- response_type=code
- scope = 'write_script_tags write_themes';
- state=24abdb4a773b68d59d0e6b95355b4eceb2d9af80e12209fb // for_example
Lots of things, going right? Don’t worry I will go through each step one by one, and we will build a permission URL in the process to make first URL redirect ( Shopify Authorization Page ) so that the merchant is able to click on install button and authorize the request.
PS: It’s assumed that you have created an app from partners dashboard and have stored client ID and client Secret secretly.
Our primary goal will be to create a URL that resembles to a structure like given above to let merchant install the app and initiate authorization process.
In my Node JS example →
I have written a function which helps us to create a URL like this.
Now the URL is built successfully. You can proceed to “/install” to get redirected to the permission URL.
After the merchant installs the app and grants permission, Shopify redirects back to the callback URL configured in your app
( /auth/shopify/callback ) and perform required operations to get the relevant data like code, hmac, state and shop.
Now, we are able to access the code that is then used in exchange of an access token. We can now use it to make requests to the Shopify API on behalf of the store owner.
Making the first Query
I hope this article will definitely set you up for your shopify app development journey.
References →
Shopify Expert?
.svg){kind=icon}
.svg){kind=icon}
