GraphQL Data Fetching in Cilium.io

This document outlines the GraphQL data fetching implementation used in the Cilium.io website. This information helps developers understand how GraphQL queries are used to access data from the website’s content sources, particularly Markdown files.

Query Structure

The gatsby-node.js file defines various GraphQL queries to retrieve data from Markdown files and create pages dynamically. These queries use the allMdx type, which is the Gatsby’s way of accessing Markdown files.

For example, the createBlogPages function in gatsby-node.js defines a query to fetch all blog posts and their categories:

  const {
              data: {
                featuredPostEdges: { edges: featuredPost },
                allCategories: { group: allCategories },
              },
            } = await graphql(`
              {
                allCategories: allMdx(filter: { internal: { contentFilePath: { regex: "/posts/" } } }) {
                  group(field: { frontmatter: { categories: SELECT } }) {
                    fieldValue
                  }
                  nodes {
                    frontmatter {
                      categories
                    }
                  }
                }
                featuredPostEdges: allMdx(
                  filter: {
                    internal: { contentFilePath: { regex: "/posts/" } }
                    frontmatter: { isFeatured: { eq: true } }
                  }
                ) {
                  edges {
                    node {
                      id
                      frontmatter {
                        isFeatured
                      }
                      internal {
                        contentFilePath
                      }
                    }
                  }
                }
              }
            `);
          

The query retrieves the following information:

• allCategories: This retrieves a list of all categories from blog posts.
• featuredPostEdges: This fetches any featured blog posts.

Accessing Data in Components

The blog.jsx template uses the GraphQL data fetched by gatsby-node.js to display blog posts dynamically:

export const blogPostsQuery = graphql`
            query blogPostsQuery(
              $skip: Int!
              $limit: Int!
              $currentCategory: String!
              $draftFilter: [Boolean]!
            ) {
              allPosts: allMdx(
                filter: {
                  internal: { contentFilePath: { regex: "/posts/" } }
                  fields: {
                    categories: { glob: $currentCategory }
                    isFeatured: { eq: false }
                    draft: { in: $draftFilter }
                  }
                }
                sort: { frontmatter: { date: DESC } }
                limit: $limit
                skip: $skip
              ) {
                nodes {
                  fields {
                    externalUrl
                    ogImageUrl
                  }
                  frontmatter {
                    path
                    date(locale: "en", formatString: "MMM DD, yyyy")
                    categories
                    title
                    ogSummary
                    ogImage {
                      childImageSharp {
                        gatsbyImageData(width: 550)
                      }
                    }
                  }
                }
              }
            }
          `;
          

This query retrieves blog posts filtered by category, draft status, and featured status. The data is then used to display blog posts on the blog page.

Examples of GraphQL Data Fetching

• Blog Page: src/templates/blog.jsx retrieves blog posts based on category, draft status, and featured status.
• Blog Post Page: src/templates/blog-post.jsx fetches a single blog post by ID.
• Home Page: src/components/pages/home/learn/learn.jsx retrieves the latest blog posts.
• Popular Posts Component: src/components/shared/popular-posts/popular-posts.jsx retrieves the most popular blog posts.
• Get Started Page: src/components/pages/get-started/related-projects/related-projects.jsx retrieves static images for related projects.

These examples illustrate how GraphQL queries are used throughout the website to fetch data and display it dynamically. This approach ensures that the content is kept consistent and up-to-date.

Top-Level Directory Explanations

src/ - This directory contains the source code for the Cilium project.

src/components/ - This directory contains components used in the project.

src/hooks/ - This directory contains hooks used in the project.

src/layouts/ - This directory contains the layouts used for the project’s website.

src/pages/ - This directory contains the pages for the project’s website.