How To Merge + Extend GraphQL APIs: Slicknode Remote Modules

Slicknode already offers a significant amount of functionality out of the box to build rich applications, however, the reality is that in most organizations and projects there are plenty of IT systems that you want to integrate or extend, both from inside and outside of the organization.

By using those systems, you don’t have to reinvent the wheel, however, you still have to spend a significant amount of time with API integrations. For example: Managing credentials for multiple environments, finding documentation, wrapping / transforming the APIs to work within the context of your application, error handling, etc.

We wanted to eliminate this integration effort, which is why we created Slicknode Remote Modules.

Introducing Remote Modules

Remote Modules allow you to merge entire GraphQL APIs into your Slicknode GraphQL APIs with just a few lines of configuration.

The use-cases for this are endless, here are just a few ideas:

• Add the Slicknode CMS as the content layer to your core product GraphQL API.
• Add your Shopify or Magento eCommerce store to the Slicknode GraphQL API and create landing pages or entire communities for better customer engagement and conversions.
• Add customer account information to internal user profile pages.
• Integrate payment providers.
• etc.

All you have to do is create a module that points to the remote GraphQL API. Slicknode automatically merges the APIs into one unified data graph, taking care of naming conflicts, data fetching logic, and schema generation.

With the merged GraphQL APIs, you can then load data from multiple data sources with a single GraphQL query. This dramatically simplifies the frontend implementation as you only need to configure one GraphQL client. You also have all the data right where you need it: In your UI components.

Extending GraphQL APIs

With the merged schemas in a Slicknode project, it is then possible to create relationships between objects of completely independent systems. This makes creating custom digital experiences on top of existing systems incredibly easy, fast, and fun.

For example: Let’s assume you have an eCommerce system where you manage all your products, inventory, pricing, etc.

You then want to create a microsite where you publish rich user testimonials with videos, images, reviews, etc. while at the same time showing the current pricing and product information from the eCommerce system.

With Slicknode, you can simply extend the types of your eCommerce store using the same data modeling tools that you use for internal types: One-to-one, many-to-many, one-to-many relations, etc. Slicknode automatically provisions the database tables, handles authorization, and creates the corresponding resolvers with the data fetching logic.

Here is what a schema for an extension of the Product type could look like:

extend type Product {
  reviews: [Review!]! @relation(
    path: "Product.sku=sku.Review"
  )
}

type Review implements Node {
  id: ID!
  sku: String!
  author: User
  image: Image
  rating: Float
  text: String! @input(type: MARKDOWN)
}

With the relation directive, we can freely connect types of independent systems. Slicknode automatically creates a Relay compatible relation with pagination, filters, sorting and high-performance data fetching logic. In contrast to other schema stitching solutions, Slicknode optimizes the data resolution automatically and fetches all the data of connected types in a single database query.

Check out the documentation to learn how to add other GraphQL APIs to your Slicknode projects.