Link APIs

Link or stitch types, interfaces, and schemas

One of the powerful aspects of StepZen is the ability to link multiple APIs together into a single GraphQL schema and get data from these multiple APIs in a single query.

To demonstrate this, let's connect our weather to a location type that will allow us to get a user's weather based upon an IP address. This would enable us to add personalized weather to a site based upon the IP address of the user visiting the site.

Import the IP-API

We'll be using another template for this that connects to the IP-API to get geolocation data based upon an IP address. Start by importing this template into our current project.

stepzen import ip-api

This creates a new folder and adds new *.graphql files to your project similar to when we imported openweathermap.

Open the file /ip-api/locationIpApi.graphql in your favorite code editor. To connect the IP-API to weather, we need to extend the Location type defined in this file. Add the following lines to the Location type:

weather: WeatherReport
    @materializer (query: "weatherReport")

This adds a field named weather that returns the type WeatherReport that was defined in the weather-report-owm.graphql from the previos step. It then uses the StepZen custom directive @materializer to tell StepZen how to populate that field. In this case it says "use the query named weatherReport to get the data."

Since Location has fields that match the weatherReport query definition (weatherReport (latitude: Float!, longitude: Float!)), StepZen can automatically execute the correct query. The finished type looks like this:

type Location {
  city: String
  country: String!
  currency: String
  ip: String!
  latitude: Float!
  longitude: Float!
  postalCode: String
  weather: WeatherReport
    @materializer (query: "weatherReport")

With just this one line of code for the @materializer directive, we've wire two entirely separate APIs together such that the location data provided by IP-API is passed to OpenWeatherMap to enable us to get weather by IP address via a single query. Let's see this in action.

Getting Weather by Location

If you still have stepzen start running in your console, your changes are automatically uploaded and deployed for you. Going back to your GraphQL query editor, open the "Explorer" tab and you should see two queries:

  • location
  • weatherReport

Add the following query in the the query editor and run it to get the weather based upon an IP address:

	location (ip:"") {
		weather {

The result looks like this:

  "data": {
    "location": {
      "city": "Orlando",
      "weather": {
        "description": "clear sky",
        "feelsLike": 26.83,
        "temp": 27.69,
        "units": "degree Celsius"

You have just linked two types together. Now, as long as you can determine the IP address of the client, you should be able to deliver a message on your web site like:

"Hello Orlando, you have clear sky."

This site uses cookies: By using this website, you consent to our use of cookies in accordance with our Website Terms of Use and Cookie Policy.