How to using plugin with gatsby-source-graphql

[phong-clarity]

My plugin config like this:

{
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "GQLServer",
        fieldName: "api",
        url: process.env.GATSBY_API_URL,
        createSchema: async () => {
          const json = JSON.parse(
            fs.readFileSync(`${__dirname}/introspection.json`)
          )
          return buildClientSchema(json.data)
        },
}

I tried to download remote images from url that returned by api field, but it's seem not working.

[graysonhicks]

Hi @phong-clarity ! Can you paste the config you are using for this plugin? (not gatsby-source-graphql). For this plugin, you should be able to target any nodes created by another plugin.

[Chmarusso]

@graysonhicks I also have a problem with getting image from GraphQL connected with gatsby-source-graphql. gatsby-config.js

    {
      resolve: "gatsby-source-graphql",
      options: {
        // This type will contain remote schema Query type
        typeName: "mmo",
        // This is field under which it's accessible
        fieldName: "mmo",
        // Url to query from
        url: "http://localhost:8080/v1/graphql",
      },
    },
    {
      resolve: `gatsby-plugin-remote-images`,
      options: {
        nodeType: 'mmo',
        imagePath: 'active_games.api_screenshot_url',
      },
    },

Query:

export const query = graphql`
query {
  mmo {
    active_games(limit: 50) {
      id
      title
      localImage
      category {
        title
      }
    }
  }
}
`

Error: Cannot query field "localImage" on type "mmo_active_games". Did you mean "image"?

[graysonhicks]

Hi @Chmarusso do you have a link to the repo I could clone to try it out?

[Chmarusso]

@graysonhicks thanks for a quick reply. Sure thing, please check this branch: https://github.com/Chmarusso/gatsby-pokedex/tree/remote-images

[robdsoule]

Any more info on this? We're seeing the same issue, and from what it looks like the gatsby-source-graphql only triggers onCreateNode once, when the initial node is created with a type of: GraphQLSource, and then uses addThirdPartySchema to add all nodes under this primary node.

While I haven't had a chance to look into it much further, it appears the fact onCreateNode is not getting triggered for any nodes that exist beyond the initial base node with type: GraphQLSource prevents this plugin from being able to ever walk down the paths it needs to add the localImage field.

// example of gatsby-config for gatsby-source-graphql 
    {
      resolve: `gatsby-source-graphql`,
      options: {
        typeName: `GCMS`,
        fieldName: `gcms`,
        url: `https://api-useast.graphcms.com/v1/...`,
        headers: {
          Authorization: `Bearer ...`,
        },
        fetchOptions: {},
      },
    },

// node created from gatsby-source-graphql
{
    "id":"70b3c840-4681-52ba-b9a9-6f72e7ee6153",
    "typeName":"GCMS",
    "fieldName":"gcms",
    "parent":null,
    "children":[],
    "internal": {
        "type":"GraphQLSource",
        "contentDigest":"bbf14fcbab1c76ad3664592248775ada",
        "owner":"gatsby-source-graphql"
    }
}

Further reading: https://github.com/gatsbyjs/gatsby/issues/8404 https://github.com/gatsbyjs/rfcs/pull/11

[graysonhicks]

Thanks @robdsoule , this does indeed look like an underlying issue with how the data is built with gatsby-source-graphql. From reading those issues, @pieh, a Gatsby team member says:

Currently it's not possible to mix 3rd party schemas with goodies like sharp transformation from gatsby - we get 3rd party schema as-is.

That being said, it's something I would like this plugin to support so will be following those issues and making a note of this outstanding bug in the README. Once Gatsby has changed the third party schema format, I will make sure that the plugin can then handle those images.

[graysonhicks]

@Chmarusso Can confirm, after testing your repo locally, that it is the issue described above. Sorry about that, and hopefully the source-graphql plugin gets updated soon.

[tehfailsafe]

Have you seen this example? https://dev.to/nevernull/gatsby-with-wpgraphql-acf-and-gatbsy-image-72m

[graysonhicks]

Hm, are you suggesting adding a way to note that your image is coming from source-graphql and running code like in the example in that link? I think that's doable. I think we could use the existing options, and maybe get by with a flag for sourceGraphQL which would default to false. Gonna reopen this for further discussion.

[tehfailsafe]

Essentially yes, I found it from another issue that someone got it working, but I can't find it now...

[wKovacs64]

I think we can fix this by expanding upon the changes made in #30 but... how much do we value the array literal syntax @graysonhicks? 😃

For data shaped like the example in the README:

allMyNodes {
  nodes: [
    {
      imageUrl: 'https://...'
    },
    ...
  ]
}

Instead of this:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-remote-images`,
      options: {
        nodeType: 'myNodes',
        imagePath: 'nodes[].imageUrl',
      },
    },
  ],
};

...you could do this:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-remote-images`,
      options: {
        nodeType: 'typeOfEachNodeInTheNodesArray',
        imagePath: 'imageUrl',
      },
    },
  ],
};

Right?

[graysonhicks]

Hm, yea I haven't used the createResolvers API myself yet, but it does look like we could target by nodeType specifically and source.id would link it correctly.

Then how does that nodeType affect the nodeType we are checking at the top most level for whether the plugin should do work on it? They don't get set as actual Gatsby nodes in the store, they are still nested under a 'real' node, so wouldn't be picked up in onCreateNode.

I don't care so much about the array literal 'syntax' itself. But definitely want to still allow getting getting the imagePath of nodes that may be in a nested array of myNodes.

[RalphBrabante]

I'm unable to have allMyNodes on my garphql hmm.