Cannot query field "takeshape" on type "Query" with Gatsby version - 4.x

[necheporenko]

Errors

warn Plugin gatsby-source-takeshape is not compatible with your gatsby version 4.4.0 - It requires gatsby@^2.24.47

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "takeshape" on type "Query".

If you don't expect "takeshape" to exist on the type "Query" it is most likely a typo.
However, if you expect "takeshape" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart
of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to
see which fields you can query and what shape they have
- You want to optionally use your field "takeshape" and right now it is not used anywhere. Therefore Gatsby can't infer
the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to
add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

To Reproduce

Steps to reproduce the behavior:

yarn add gatsby@latest
yarn build

[necheporenko]

https://www.gatsbyjs.com/docs/reference/release-notes/migrating-source-plugin-from-v3-to-v4/

This may be the cause of the errors.

[necheporenko]

This is not a solution to the problem, but if your project is on 4.x Gatsby and you need to use TakeShape, you can temporarily replace their plugin with this one:

npm install gatsby-source-graphql dotenv

gatsby-config.js

require("dotenv").config();

module.exports = {
    plugins: [
        {
            resolve: "gatsby-source-graphql",
            options: {
                typeName: "TS",
                fieldName: "takeshape",
                // Url to query from
                url: `https://api.takeshape.io/project/${process.env.TAKESHAPE_PROJECT}/graphql`,
                // HTTP headers
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${process.env.TAKESHAPE_TOKEN}`,
                },
                // Additional options to pass to node-fetch
                fetchOptions: {},
            },
        },
    ]
};

[mshick]

@necheporenko thanks for providing that info. I would recommend using gatsby-source-graphql as described above rather than this plugin for the foreseeable future. A plugin rewrite for Gatsby V4 is pretty far down the list for us right now.

[samason]

@mshick is there a ballpark timeframe for this rewrite? The gatsby-source-graphql plugin does not provide the necessary query responses for gatsby-plugin-image and therefore we're missing out on the performance benefits of file formats with higher compression, progressive loading etc, or is there a workaround to get the same benefits?