How to query data from 2 APIs

Question

I have setup a Gatsby Client which connects to Contentful using the gatsby-source-contentful plugin. I have also connected a simple custom API which is connected using the gatsby-source-graphql plugin.

When I run the dev-server I am able to query my pages from Contentful in the playground.
I am also able to query my custom API through the playground as well.
So both APIs work and are connected with Gatsby properly.

I want to programatically generate a bunch of pages that have dynamic sections (references) which an author can add and order as she wishes.

I do achieve this using the ...on Node connection together with fragments I define within each dynamic section. It all works out well so far.

My actual problem:

Now I have a dynamic section which is a Joblist. This Component requires to get data out of the Contentful API as it stores values like latitude and longitude. So the author is free to set a point on a map and set a radius. I successfully get this information out of Contentful using a fragment inside the component:

export const query = graphql `
fragment JoblistModule on ContentfulJoblisteMitAdresse {
  ... on ContentfulJoblisteMitAdresse {
    contentful_id
    radius
    geo {
      lon
      lat
    }
  }
}`

But how can I pass this information in to another query that fetches the jobdata from my custom API? If I understand Gatsby correctly I somehow have to connect these two API's together? Or can I run another query somehow that fetches these values passed in as variables? How and where would I achieve this?

I could not find any approach neither inside the gatsby-node.js (since passed-in context can only be used as variables inside a query) nor in the template-file (since I can run only 1 query at a time), nor in the component itself (since this only accept staticQuery)

I don't know where my misunderstanding is. So I would very appreciate any hints, help or examples.

for dynamic queries - job seeker enters geo - https://www.gatsbyjs.org/docs/data-fetching/ (you can query graphql using post/json) ... below link for using apollo (for dynamics) inside gatsby — xadm, Feb 04 '20 at 22:24

score 2 · Answer 1 · answered Feb 27 '20 at 22:52

Since your custom API is a graphQL API, you can use delegateToSchema from the graphql-tools package to accomplish this.

You will need to create a resolver using Gatsby's setFieldsOnGraphQLNodeType API. Within this resolver, your resolve function will call delegateToSchema.

We have a similar problem, our blog posts have an "author" field which contains an ID. We then do a graphQL query to another system to look up author info by that ID.

return {
        remoteAuthor: {
          type: person,
          args: {},
          resolve: async (source: ContentfulBlogPost, fieldArgs, context, info) => {
            if (!source.author) {
              return null
            }

            // runs the selection on the remote schema
            // https://github.com/gatsbyjs/gatsby/issues/14517
            return delegateToSchema({
              schema: authorsSchema,
              operation: 'query',
              fieldName: 'Person',
              args: { id: source.author },
              context,
              info,
            })
          },
        },
      }

This adds a 'remoteAuthor' field to our blog post type, and whenever it gets queried, those selections are proxied to the remote schema where the person type exists.

Thank you for this information Gordon! I will give it a shot as soon as I get back to it and reply if this solves my Problem... — Raphael, Mar 03 '20 at 15:00

How to query data from 2 APIs

1 Answers1