Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
111 lines (87 sloc) 3.29 KB
date title published tags canonical_url cover_image
2019-08-29
Learning GraphQL
false
graphql
webdev
beginners
../../images/coverImages/2019-08-29-cover-image.jpeg

##Using GraphQL In My Personal Website

A few months ago I embarked on a journey to upgrade my personal website from a React/Rails stack to a Gatsby site. One reason for this switch is because I wanted to get more familiar with GraphQL.

With the previous version of my site, I had to make an API call to a specific Rails endpoints. Then the frontend had to accomodated whatever data was returned. Sometimes I had to make multiple HTTP requests to get all the data I needed for one component.

I heard that GraphQL might be able to address these problems so I gave it a shot!

##GraphQL Queries - Get the Data You Need

GraphQL is a query language that lets you request the exact data you want. For example, here's a query from my blog that gets data for building blog post show pages:

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        cover_image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
      fields {
        slug
      }
    }
  }
`

My new site stores all data (markdown files and images) in the frontend repository. GraphQL lets me easily pull this data and programmatically build pages.

##GraphQL Works Great With Static Sites As noted above, my personal site queries the frontend to build blog post pages. This all happens at build time. In other words, I have a static site that uses GraphQL.

Gatsby's tutorial explains it best:

Gatsby lets you use GraphQL to query your data and map the query results to pages—all at build time.

That's why this site loads blazingly fast! 🔥

##Pull Data From Anywhere

Using GraphQL on the frontend lets you pull data from basically anywhere. This is a really powerful idea that I'm still wrapping my head around.

I'm currently working through the React + Apollo GraphQL Tutorial to see how GraphQL works with a fullstack app. This tutorial walks you through building a React/Express clone of hackernews that uses GraphQL.

Unlike my static site, the hackernews clone pulls data from a backend API (Express).

export const FEED_QUERY = gql`
  {
    feed {
      links {
        id
        createdAt
        url
        description
        postedBy {
          id
          name
        }
        votes {
          id
          user {
            id
          }
        }
      }
    }
  }
`

The React Apollo client helps send this query to my Express server. The Express server is built on Apollo, so it's set up to accept GraphQL queries.

##My GraphQL Coding Environment

These are the tools I use when working on GraphQL projects:

  1. Editor

    • VSCode
  2. VSCode Extensions

    • Apollo GraphQL - apollographql.vscode-apollo
    • GraphQL - prisma.vscode-graphql
    • Prisma - prisma.prisma
  3. npm packages

    • graphql
    • graphql-cli
    • apollo-boost
    • react-apollo
    • prisma
  4. Applications

    • graphql-playground
You can’t perform that action at this time.