Cannot query field "image" on type "MarkdownRemarkFields".

[errrken]

Hi there,

Using the gatsby starter with the following dependencies:

"dependencies": { "gatsby": "^3.4.1", "gatsby-plugin-image": "^1.6.0", "gatsby-plugin-postcss": "^4.6.0", "gatsby-plugin-react-helmet": "^4.6.0", "gatsby-plugin-sharp": "^3.6.0", "gatsby-source-filesystem": "^3.6.0", "gatsby-theme-apollo-docs": "^4.7.6", "gatsby-transformer-sharp": "^3.6.0", "postcss": "^8.2.6", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0" }

and

{ resolve: "gatsby-theme-apollo-docs", options: { siteName: "test", root: __dirname, subtitle: "Apollo Server", description: "A guide to using Apollo Server", sidebarCategories: { null: ["index"], }, }, },

in gatsby-config.js gives me:

Cannot query field "image" on type "MarkdownRemarkFields" and Cannot query field "image" on type "MdxFields".

any ideas?

[richburdon]

I have the same problem -- did you resolve this?

  "dependencies": {
    "@dxos/docs-components": "^1.0.0-beta.19",
    "@dxos/docs-theme": "^1.0.0-beta.19",
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "gatsby": "^2.17.11",
    "gatsby-plugin-mdx": "^2.7.1",
    "gatsby-plugin-sharp": "^2.6.14",
    "gatsby-source-filesystem": "^2.3.14",
    "gatsby-theme-apollo-core": "^3.0.17",
    "gatsby-theme-apollo-docs": "^4.7.9",
    "gatsby-transformer-sharp": "^2.5.7",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "toposort": "^2.0.2"
  }

[errrken]

@richburdon Unfortunately not

[mrlubos]

@errrken I think I saw the same issue and downgrading Gatsby worked in my case. I am currently on version 2.32.13, let me know if you need more help.

[junneyTW]

I have a same issue... I can't resolve it

"dependencies": { "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "gatsby": "^2.32.13", "gatsby-plugin-gatsby-cloud": "^2.9.1", "gatsby-plugin-mdx": "^2.9.0", "gatsby-plugin-postcss": "^4.9.0", "gatsby-source-filesystem": "^3.9.0", "gatsby-theme-apollo-docs": "^4.8.0-alpha.28", "postcss": "^8.3.5", "react": "^17.0.1", "react-dom": "^17.0.1", "webpack": "^5.45.1" }

[mrlubos]

Hi @junneyTW, are you using a monorepo setup? I wonder if you're able to create a CodeSandbox with reproducible example?

[DirkLachowski]

Adding an empty shareImageConfig fixes it:

module.exports = {
  pathPrefix: '/docs',
  plugins: [
    {
      resolve: 'gatsby-theme-apollo-docs',
      options: {
        shareImageConfig: {},
// -----------------------^
        siteName: '',
        pageTitle: '',

[mrlubos]

Adding an empty shareImageConfig fixes it:

module.exports = {
  pathPrefix: '/docs',
  plugins: [
    {
      resolve: 'gatsby-theme-apollo-docs',
      options: {
        shareImageConfig: {},
// -----------------------^
        siteName: '',
        pageTitle: '',

Hey @DirkLachowski, thanks! Are you able to run on Gatsby v3 with this config?

[mrlubos]

@mrlubos No, i get a weired webpack error on v3. I currently use the dependencies from one of the official apollo docs ( https://github.com/apollographql/rover/blob/main/docs/package.json ).

Got it, thank you!

[DirkLachowski]

@mrlubos For completeness and because you mentioned it earlier. Simply downgrading to v2 didn‘t do the trick for me, i had to add the empty config. Our docs are currently a seperate project from our main site (that‘s on v3) and get merged during deploy, so that‘s not an issue in the short run. But i‘m thinking of forking the theme and upgrading it to v3. Our site is build with tailwindcss, so having apollo-core as a second design framework isn‘t my prefered solution.

[mrlubos]

@mrlubos For completeness and because you mentioned it earlier. Simply downgrading to v2 didn‘t do the trick for me, i had to add the empty config. Our docs are currently a seperate project from our main site (that‘s on v3) and get merged during deploy, so that‘s not an issue in the short run. But i‘m thinking of forking the theme and upgrading it to v3. Our site is build with tailwindcss, so having apollo-core as a second design framework isn‘t my prefered solution.

Thank you for the context! Yes, I am also thinking about forking but for a different reason. I want to host multiple docs in the same project. It doesn't seem to be possible at the moment? It appears to me that Apollo has individual docs for React/JS, Android, iOS, etc. and they somehow merge them together in deployment. I think this because I can't figure out a way to update the sidebar navigation based on the subpath. Routing works (e.g. /docs/foo and /docs/bar), but the navigation stays the same. I'd like to host all docs in a single Github repository and build them together.

[DirkLachowski]

It appears to me that Apollo has individual docs for React/JS, Android, iOS, etc. and they somehow merge them together in deployment. I think this because I can't figure out a way to update the sidebar navigation based on the subpath.

In Apollo's case, each projects navigation source lives in the respective project in the docs directory, is a self contained gatsby site and built with a custom pathPrefix. See https://github.com/apollographql/apollo-client/blob/e3b1cbb97f715c2a778f2c2742af16884c0f7f4c/docs/gatsby-config.js#L4 for an example. Not sure how they deploy, but we deploy to an S3 bucket, so we simply use gatsby-deploy-s3 with removeNonexistentObject: false to deploy each part. No merge required, you only have to have the path prefix distinct per doc site. If you switch the nav on Apollo's doc site you can see how the path prefix for each subsite changes

The sidebar uses the navConfig config option to show a navigation switcher - this one:

Apollo is using a centralized config that is imported in each doc site.

Config

https://github.com/apollographql/gatsby-theme-apollo/blob/e22d7f1170e8dc805c31219edde02d0022958ba5/packages/gatsby-theme-apollo-docs/theme-options.js#L1-L9

Sample usage

(Merged into options in line 9) https://github.com/apollographql/apollo-client/blob/e3b1cbb97f715c2a778f2c2742af16884c0f7f4c/docs/gatsby-config.js#L1-L10