Menu

React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

GraphQL colocation in React a growing trend

Colocation of GraphQL queries is a growing trend in the world of React driven apps. What this means is that the data fetching GraphQL query is placed in the same location as the component's view logic. This is somewhat of a radical departure from the MVC architecture that many developers have been used to for decades.

One major project directly promoting the use of co-locating all the logic of a single component to the application is the Gatsby.js, which is a static site generator that uses GraphQL as an internal API. Example of a simple React component below:

import * as React from "react";
import Link from "gatsby-link";

export default ({ data }) => {
  const post = data.markdownRemark;
  return (
    <div>
      <Link to="/">homepage</Link>
      <h1>{post.frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
      <i>{post.frontmatter.date}</i>
    </div>
  );
};

export const query = graphql`
  query BlogPostQuery($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        date
      }
    }
  }
`;

This is only the latest move in how best practises evolve over time. A while ago placing template views, query logic and even display properties via CSS would have been an absolute abomination. Now, however it is considered best practice by many.

Written by Jorgé on Monday October 2, 2017

Permalink -

« Gatsby is a static site generator using React and GraphQL - Apollo vs. Relay Modern »