Leveraging Shopify’s API to Build the Latest Marketplace Kit

In February, we released the second version of Marketplace Kit: a collection of boilerplate app code and documentation allowing third-party developers to integrate with Shopify, build selected commerce features and launch a world-class marketplace in any channel.

Shopify logo
Shopify
•
Kenji Duggan
•6 min read•intermediate•
--
•View Original
GraphQLJavaScriptJSONJWTReact

Overview

The article discusses the release of the second version of Shopify's Marketplace Kit, which provides boilerplate app code and documentation for developers to build and integrate commerce features with Shopify. It highlights the decoupling of the Marketplace Kit from the Shopify CLI, the use of popular dependencies, and the implementation of JWT authentication and GraphQL APIs in the new sample apps.

What You'll Learn

1

How to implement JWT authentication in Shopify apps using App Bridge

2

How to set up a GraphQL server with Express using Apollo Server

3

Why to use both GraphQL and REST APIs in Shopify applications

4

How to create custom API clients for data fetching from Shopify's Node API

Prerequisites & Requirements

  • Familiarity with web development concepts such as JWT authentication and GraphQL
  • Experience with Node.js and Express
  • Basic understanding of React for frontend development(optional)

Key Questions Answered

How does Shopify's Marketplace Kit help developers build marketplaces?
Shopify's Marketplace Kit provides boilerplate app code and documentation that allows developers to integrate with Shopify and build commerce features. This enables the creation of a fully functional marketplace across various channels, streamlining the development process for third-party developers.
What are the benefits of using both GraphQL and REST APIs in Shopify apps?
Using both GraphQL and REST APIs allows developers to choose the most efficient method for data fetching. For instance, GraphQL is preferred for complex queries, while REST can be more straightforward for simple data retrieval, ensuring flexibility and efficiency in app development.
What technologies are used in the new Marketplace Kit sample apps?
The new Marketplace Kit sample apps utilize Node.js for the backend, Express as the web framework, React for the frontend, and Next.js for the buyer-facing client app. Additionally, Apollo Client and Apollo Server are used for GraphQL integration.
How is JWT authentication implemented in the Marketplace Kit?
JWT authentication in the Marketplace Kit is implemented using App Bridge, which provides a wrapper for React components. It simplifies the authentication process by managing session tokens and securely embedding the app within Shopify's admin interface.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Backend
Node.js
Used as the server-side JavaScript runtime for the Marketplace Kit sample apps.
Backend
Express
Utilized as the web framework for building the server-side applications.
Frontend
React
The main JavaScript library used for building the user interface of the admin and buyer apps.
Frontend
Next.js
Chosen for the buyer-facing client app to provide structure and server-side rendering capabilities.
Frontend
Apollo Client
Used for integrating GraphQL in the client-side applications.
Backend
Apollo Server
Employed to set up the GraphQL server with Express.
Frontend
App Bridge
A library that simplifies the embedding of apps within Shopify and handles authentication.

Key Actionable Insights

1
Leverage Shopify's Marketplace Kit to accelerate your app development process by using the provided boilerplate code and documentation.
This approach allows developers to focus on building unique features without starting from scratch, significantly reducing development time.
2
Utilize both GraphQL and REST APIs in your applications to optimize data fetching based on specific use cases.
Understanding when to use each API type can improve performance and reduce complexity in your app's architecture.
3
Implement JWT authentication using App Bridge to enhance security in your embedded Shopify apps.
This method simplifies the authentication process and ensures that your app integrates seamlessly with Shopify's ecosystem.

Common Pitfalls

1
Failing to properly manage dependencies when decoupling from the Shopify CLI can lead to issues with code maintainability.
It's crucial to choose widely used dependencies and manage them effectively to ensure that your application remains stable and follows best practices.
2
Over-relying on either GraphQL or REST can lead to inefficiencies in data fetching.
Developers should evaluate the specific needs of their application to determine the best API approach for each data request.

Related Concepts

Shopify API Integration
Graphql Vs REST API
App Bridge For Authentication
Node.js And Express For Backend Development