Remote schemas
Here are some use cases:
- use GraphQL headless CMS such as GraphCMS or Strapi without any overhead
- use Magento2 GraphQL endpoint as-is (useful for unsupported features or custom extensions)
- develop and deploy your microservices using another technology, and expose its GraphQL API in your Front-Commerce GraphQL schema
- … many more!
In Front-Commerce, GraphQL modules can declare their own local schema but they can also reuse remote schemas and make them available in the GraphQL schema. This is referred to as remote schema stitching.
This feature has been added in version
1.0.0-alpha.2
Exposing an entire remote schema
The simplest use case is to expose the whole remote schema in your existing application.
In this example, we are going to illustrate this feature by exposing the Pokemon GraphQL API in our eCommerce application… you may find it useful if you are selling Pokemon related goodies! 😸
First, let’s start by creating a new GraphQL module and register it in our application:
export default {
namespace: "Pokemon",
};
module.exports = {
name: "Front-Commerce",
url: "https://www.front-commerce.test",
modules: [],
serverModules: [
{ name: "FrontCommerce", path: "server/modules/front-commerce" },
{ name: "Magento2", path: "server/modules/magento2" },
{ name: "Pokemon", path: "./my-module/server/modules/pokemon" },
],
};
If you need more details about the steps above, you can read the Extend the GraphQL schema documentation page.
In its current state, this GraphQL module does nothing at all! Let’s update it
to expose the remote GraphQL schema, by adding a
remoteSchema
key to the module definition.
export default {
namespace: "Pokemon",
remoteSchema: {
uri: "https://graphql-pokemon.vercel.app/",
},
};
Restart your application and explore your schema using the GraphQL playground (by default at http://localhost:4000/playground).
You must see several new top level queries prefixed by Pokemon_
.
Congratulations! You now have access to all the Pokemon remote GraphQL
queries and mutations in your Front-Commerce application, alongside your
existing eCommerce ones.
Try the query below for instance:
{
Pokemon_pokemon(name: "raichu") {
name
weight {
minimum
maximum
}
image
classification
}
product(sku: "VD11") {
name
}
}