Gatsby: GraphQL not work in subdirectories page component

[dzuncoi]

Summary

Currently, my folder structure is like

-- pages
---- index.js
---- hiring
------ hiring.js
------ index.js

Those index and hiring page work correctly, but the problem comes when I need some graphQL in hiring.js page:

export const pageQuery = graphql`
  query RecQuery {
    allStrapiRecruitment {
      edges {
        node {
          id
          openingAmount
          description
        }
      }
    }
  }
`

But there is no data in hiring.js props. I notice that this piece of code work perfectly with files inside pages folder directly, but doesn't work with file in sub-directories.
My question is: is it intentional or do I miss something?

Relevant information

Environment (if relevant)

node 8.9.3
npm 5.6.0
gatsby 1.1.52

[giraffesyo]

Can you provide your gatsby-config.js? I'm interested in seeing what options you have for gatsby-source-filesystem.

[dzuncoi]

@giraffesyo here is my gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Title',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-source-strapi`,
      options: {
        apiURL: `http://localhost:1337`,
        contentTypes: [ // List of the Content Types you want to be able to request from Gatsby.
          `recruitment`,
          // `user`
        ]
      },
    },
    {
      resolve: `gatsby-plugin-react-css-modules`,
      options: {
        // *.css files are included by default.
        // To support another syntax (e.g. SCSS),
        // add `postcss-scss` to your project's devDependencies
        // and add the following option here:
        filetypes: {
          ".scss": { syntax: `postcss-scss` },
          ".sass": { syntax: `postcss-scss` },
        },

        // Exclude global styles from the plugin using a RegExp:
        exclude: `\/global\/`,
      },
    },
    `gatsby-plugin-sass`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images/`
      }
    },
    {
      resolve: `gatsby-plugin-facebook-pixel`,
      options: {
        pixelId: 'My pixel Id',
      },
    },
  ],
};

I only set path to process image in gatsby-source-filesystem
So subdirectories pages component still can get GraphQL data, and I'm doing something wrong?

[brotzky]

I ran into the same issue before and found out this is by design:
https://github.com/gatsbyjs/gatsby/issues/3290#issuecomment-353162384

The pattern to do this is to use GraphQL Fragments
https://github.com/gatsbyjs/gatsby/issues/2168#issuecomment-330648458

Review the two issues above and it should get in you in the right direction! Thanks!

Closing this as there's no action to be taken.

[giraffesyo]

@brotzky I don't think those two answer the OP's problem. He mentioned that the same file works fine if he brings it up one directory into the pages folder. That means that he is making a page component, not a non-page component. The default export should be receiving props from the graphql query. However, I'm not sure what the exact issue here is from the details provided.

@dzuncoi Do you have some steps we can take to reproduce this issue?

[dzuncoi]

@giraffesyo you point out my issue correctly
So I follow this one https://hackernoon.com/building-a-static-blog-using-gatsby-and-strapi-8b5acfc82ad8
using strapi as data layer for gatsby. So I setup exactly the same with this tutorial (in terms of strapi), then setup gatsby like gatsby new my-site, add gatsby-source-strapi into gatsby-config like above. Then create some data in strapi, import this piece of code

export const pageQuery = graphql`
  query RecQuery {
    allStrapiRecruitment {
      edges {
        node {
          id
          openingAmount
          description
        }
      }
    }
  }
`

to pages/index.js or pages/hiring.js, it works correctly, but doesn't in pages/hiring/index.js

[dzuncoi]

Hi @giraffesyo @brotzky, any update for this?

[m-allanson]

Hey @dzuncoi this does sound like a bug... could you create a small project that recreates this issue? Then someone can use that for testing and debugging.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.