CraftQL – A drop-in GraphQL server for Craft CMS

CraftQL is a drop-in GraphQL server for your Craft CMS implementation. With zero configuration, CraftQL allows you to access all of Craft’s features through a familiar GraphQL interface.

❓ Unfamiliar with GraphQL? Earlier today Ryan Glover (Ponyfoo) posted a great introduction to it.

In the admin interface you get a GraphiQL interface, and the ability to define access rights per token you generate.

Querying is very familiar:

CraftQL provides a top level entries field that takes the same arguments as craft.entries does in your template. This is the most commonly used field/access point.

Like so:

query fetchNews {             # The query, `query fetchNews` is completely optional
  entries(section:[news]) {   # Arguments match `craft.entries`
    ...on News {              # GraphQL is strongly typed, so you must specify each Entry Type you want data from
      id                      # A field to return
      title                   # A field to return
      body                    # A field to return
    }
  }
}

A license costs $59, but for that amount of money you can’t build it yourself …

CraftQL.xyz →
CraftQL (GitHub) →

📽 Whilst everything is quite self-explanatory, a video on how to set it up is included in the “Headless Craft CMS” video series over at CraftQuest. The Installing GraphQL via CraftQL introductory video is one of the free videos you can watch over there.

urql – A Universal React Query Library

Ken Wheeler:

There are some amazing solutions in the space already, notably Relay and Apollo, both of which are incredibly full-featured, brilliantly engineered, and wonderfully flexible. That said, these libraries might feel like a bit much to get started with at times, especially for beginners.

Our goal with urql is to simplify the process of using GraphQL in React apps. There are simpler solutions, but they end up pushing the complexity of handling data storage and caching onto the user. There are also more complex solutions that allow unimaginable flexibility in a variety of library/framework contexts, but we’re looking for the sweet spot that allows developers to be productive in React with GraphQL.

If you’ve been following Ken on Twitter you perhaps know that he’s a big fan of Render Props. It’s no surprise then, than urql‘s Connect component uses it.

const MyComponent = () => (
  <Connect
    query={query(MyQuery)}
    render={({ loaded, fetching, refetch, data, error, addTodo }) => {
      //...Your Component
    }}
  />
);

const MyQuery = `
  query {
    todos {
      id
      text
    }
  }
`;

Totally loving the Steve Urkel reference … grew up with that show 🙂

Introducing urql
urql (GitHub) →

React, Relay and GraphQL: Under the Hood of the Times Website Redesign

The folks over at The New York Times have made change to using React, Relay and GraphQL for the new version of their website (which they are rolling out over the coming months):

We thought it would be nice if there was one place to add and retrieve data and one way to authenticate against it. It would also be helpful if there was a common language and repository for creating and reusing components. If a new developer joins our team, I want to point them at a single page of documentation that explains how to get up and running — and preferably start building apps the same day.

This is not at all a dream scenario. We are moving towards this reality. That future is Relay and GraphQL.

In case you – just like I was – are wondering if they’ll break the web with this, they won’t. In the comments the author mentions:

Isomorphism (rendering a full server response) is a first-class citizen in our architecture. Most of the challenges we have run into are around ensuring that our server responses and client responses have parity. By solving this problem, we don’t have to worry about the SEO hit. SEO is a top priority at the NYT.

React, Relay and GraphQL: Under the Hood of the Times Website Redesign →

Full-stack React + GraphQL Tutorial

An extensive 5-part tutorial by the Apollo folks, using their own Apollo Client to communicate with the GraphQL Server:

Despite the great advantages of using GraphQL [over REST], the first step can be a bit daunting. That’s why I’ve started writing a series of tutorials that take you step by step through building a full-stack React app with GraphQL and Apollo Client. The series will guide you through the entire process of building an instant messaging app which uses GraphQL throughout.

  • Part 1: Setting up a simple client
  • Part 2: Setting up a simple server
  • Part 3: Writing mutations and keeping the client in sync
  • Part 4: Optimistic UI and client side store updates
  • Part 5: Input Types and Custom Cache Resolvers

Full-stack React + GraphQL Tutorial →
Apollo Client →

💁‍♂️ New to GraphQL? “So what’s this GraphQL thing I keep hearing about?” is a good intro to the subject. The GraphQL Documentation itself is also worth a look, as it explains the core concepts (Fields, Arguments, Mutations, etc) really good.