Trouble fetching REST endpoints

[saschaklatt]

Hi, I have some trouble fetching data from a custom REST API. I can't figure out how to tell the plugin which endpoints to use.

Example:

Endpoint for posts: GET http://localhost:3000/posts Endpoint for authors: GET http://localhost:3000/authors

{
  resolve: "gatsby-source-custom-api",
  options: {
    url: {
      development: "http://localhost:3000", // on "gatsby develop"
      production: "http://localhost:3000", // on "gatsby build"
    },
    imageKeys: ["image"],
    schemas: {
      posts: `
        id: String
        title: String
        description: String
        image: image
        path: String
      `,
      authors: `
        id: String
        firstName: String
        lastName: String
        path: String
      `,
    },
  },
}

It seems to fetch data only from the base url http://localhost:3000, but the endpoints /authors and /posts are not queried.

Could you help me out here? Thanks in advance!

[AndreasFaust]

You need to have a separate instance for every endpoint. Admittedly, I do not know, if this is possible with my plugin. You could try and tell me. But you certainly can use gatsby-source-apiserver: https://www.gatsbyjs.org/packages/gatsby-source-apiserver/?=api

[saschaklatt]

Oh ok, I wasn't aware that you can have multiple instances for one plugin. Thanks, I'll give it a try.

[AndreasFaust]

How did you solve your problem, @klattiation ?

[jlev]

This was the solution for an issue I was having, multiple instances of the plugin resolved it for me. Have to make sure to use a different rootKey for each one, but then you can @link the schemas together if you have two data types to join. Very neat!

[AndreasFaust]

Did not know, that this works. Thank you, @jlev ! Could you provide your example-code and maybe some short instructions (especially for this @link-thing), that I can add to the readme? Would be great!

[saschaklatt]

How did you solve your problem, @klattiation ?

I ended up building my own custom source plugin. Thanks for your help anyway.

[jlev]

I have two API endpoints, one with a lot of entities and a list of information fields, and another list of field definitions with descriptions. I needed to join them together by a common key (slug).

entities/: [
    {
        "code": ID,
        "name": String,
        "information": [
            {
                "value": String,
                "slug": slug
            }...
}]
fields/: [
    {
        "slug": slug,
        "description": String
    }...
],

My gatsby-node.js looks like this:

    // need to add separate sources here for each static data endpoint
    {
      resolve: 'gatsby-source-custom-api',
      options: {
        url: API_URL+'fields/',
        rootKey: 'APIField',
        schemas:  {
          APIField: `
            slug: String
            description: String
          `
        }
      }
    },
    {
      resolve: 'gatsby-source-custom-api',
      options: {
        url: API_URL+'entities/',
        rootKey: 'APIEntity',
        schemas:  {
          EntityInformation: `
            text: String
            field: APIField @link(by: "slug")
          `,
          APIEntity: `
            name: String
            code: ID
            information: [EntityInformation]
          `
        }
      }
    },

The @link directive adds an implicit resolver between the fields, so you can query them like this:

APIEntity(code: { eq: $id }) {
      name
      code
      information {
        value
        field {
          description
          slug
        }
      }
    }

There's more info at https://www.gatsbyjs.org/docs/schema-customization/#foreign-key-fields, which your schemas hash worked well with.

Thanks for the plugin, I found it a lot easier to use than the bigger gatsby-source-apiserver one.

[AndreasFaust]

Thank you for elaborating!

[AndreasFaust]

Added it to the Docs. Thanks to all of you.