CODEWITHSUNDEEP
graphqlfilesystemsgatsby
Sarquamon
Sarquamon

Reputation: 49

Query folder usign Graphql and gatsby-source-filesystem

Edit

I think i was not clear about my problem.

The problem is that sourceInstanceName is returning the empty array shown in the question even though the folder has content and .md files.

Hello everyone I've been having problem querying the folders with graphql.

You see I have this file structure:

/content/posts/Journeys/{FILENAME}.{EXTENSION}
/content/posts/Blog/{FILENAME}.{EXTENSION}

I would like to query the FOLDER NAME (aka Journeys or BLOG) not the content.

I'm able to query using this:

query test2 {
  journeys: allFile(filter: {sourceInstanceName: {eq: "posts"}}) {
    edges {
      node {
        dir
        name
        relativePath
        relativeDirectory
      }
    }
  }
}

Which returns this, where it return unnecessary files as I just want the folder name or directory:

{
  "data": {
    "journeys": {
      "edges": [
        {
          "node": {
            "dir": "D:/Side-projects/salomonpina.dev/content",
            "name": ".git",
            "relativePath": ".git",
            "relativeDirectory": ""
          }
        },
        {
          "node": {
            "dir": "D:/Side-projects/salomonpina.dev/content/icons/png",
            "name": "github-icon_512",
            "relativePath": "icons/png/github-icon_512.png",
            "relativeDirectory": "icons/png"
          }
        },

more info down...

And it also work for Assets

But when I change (filter: {sourceInstanceName: {eq: "posts"}}) to (filter: {sourceInstanceName: {eq: "journeys"}})

It returns an empty array:

{
  "data": {
    "journeys": {
      "edges": []
    }
  }
}

Even though its using the correct name, the one coming from gatsby-source-filesystem.

Here's what I did in gatsby-config.js and the gatsby-source-filesystem.

{
      resolve: "gatsby-source-filesystem",
      options: {
        name: "posts",
        path: `${__dirname}/content/`,
      },
    },

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "assets",
        path: `${__dirname}/static/`,
      },
    },

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "journeys",
        path: `${__dirname}/content/posts/Journeys/`,
      },
    },

I've tried this solution but doesn't seem to help me out.

Any help would be appreciated.

Upvotes: 0

Views: 627

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29305

There's a lack of information about the type of data (extension) of the files that will affect how you should gather your post information. What you need to do once you get the sourceInstanceName access directly to the content itself. Assuming you have a markdown structure, this will be childMarkdownRemark, so this should work:

{
  allFile(filter: {sourceInstanceName: {eq: "journeys"}}) {
    edges {
      node {
        sourceInstanceName
        childMarkdownRemark {
          frontmatter {
            slug
          }
        }
      }
    }
  }
}

Note: your nested structure since childMarkdownRemark object may differ from mine. Check the localhost:8000/___graphql playground to see which is your query object.

In addition, I think you are missing a filesystem in your gatsby-node.js for your Blog folder:

{
  resolve: "gatsby-source-filesystem",
  options: {
    name: "blog",
    path: `${__dirname}/content/posts/Blog/`,
  },
},

If you don't retrieve any value from your query, remove the filter to check what's the sourceInstanceName of each post (to check if they are properly set or the filter doesn't work due to a typo). Check them in localhost:8000/___graphql playground.

I don't know your requirements or specifications but, maybe adding another field in your post GraphQL schema fits for you too, let's say category (journey or blog) is valid and more scalable for you, as an idea.

Upvotes: 1

Related Questions