Querying your Redux store with GraphQL

Using Apollo Client’s InMemoryCache and Local Resolvers, it’s possible to have it query your Redux store:

import store from "./Store";

const typeDefs = gql`
    type Query {
        users: [User]
    }

    type User {
        groups: [Group]
    }

    type Group {}
`;

const client = new ApolloClient({
    cache: new InMemoryCache(),
    typeDefs,
    resolvers: {
        Query: {
            users: () => store.getState().users,
        },
        User: {
            groups: user =>
                store
                    .getState()
                    .groups.filter(group => user.group_ids.includes(group.id)),
        },
    },
});

Neat “hack”. A shame the Local Resolvers are deprecated in Apollo 3.0 and will most likely be removed in a future version.

Querying your Redux store with GraphQL →
Apollo Client Local Resolvers →

A Peek at the Future of GraphQL

Talk by Robert Zhu, member of the GraphQL Working Group (amongst other things).

Since the formation of the GraphQL Foundation last year in March, we have been working on creating a resilient process to govern the GraphQL ecosystem and language evolution. In this talk, I will discuss the roles and responsibilities of the GraphQL Foundation, Working-group, and steering committee. Then I will discuss upcoming improvements to GraphQL ecosystem projects such as GraphQL.org and GraphiQL. Finally, we will dive deep into the most promising proposals for additions to the specification. By the end of the talk, you’ll have a good sense for the direction that we are taking GraphQL in the next few years.

That RFC process sure looks familiar 😉

Building The New Facebook With React and Relay

With the new Facebook design that got anounced just a few days ago, this video by Ashley Watkins is worth a look:

Ashley discusses some of the technologies and strategies powering FB5, the new facebook.com. Topics covered include Facebook’s approach to CSS-in-JS, data-driven dependencies, phased code downloading, and more.

gqless – A GraphQL client without queries

Now this is a step forward:

gqless is a fundamentally new approach to a GraphQL client. It makes using your API enjoyable, by generating queries at runtime based upon the data your app consumes.

Here’s an example app of it in action. Notice how the data it fetched automagically, depending on what is to be consumed in the component:

gqless
gqless-movies-demo – A demo movies app using Hasura and gqless →

Video by @thesamdd

RedwoodJS – Bringing full-stack to the JAMstack

Update 2020.06.09: here’s a full tutorial to get you started with RedwoodJS.

Now here’s an interesting project:

Redwood is an opinionated, full-stack, serverless web application framework that will allow you to build and deploy JAMstack applications with ease. Imagine a React frontend, statically delivered by CDN, that talks via GraphQL to your backend running on AWS Lambdas around the world, all deployable with just a git push — that’s Redwood.

I’m seeing a similar move as with Rome here: it’s very opiniated.

By making a lot of decisions for you, Redwood lets you get to work on what makes your application special, instead of wasting cycles choosing and re-choosing various technologies and configurations.

Projects built with RedwoodJS exist of two parts (which they call “sides”), both contained in one repo: a web side (built using React) and an api side (which is an implementation of a GraphQL API).

This Twitter thread by the author sheds some more light onto the project (which some compare to Rails when it first got released):

There’s already some videos on how to get started with RedwoodJS available on Egghead that you can check out. It’s not complete, but the 4 ones currently online should get you going on the web side of it.

RedwoodJS →
RedwoodJS Source (GitHub) →

Full-stack apps with Apollo, a tutorial

The Apollo docs sports a very complete tutorial, combining TypeScript, GraphQL, and Apollo (of course):

In this tutorial, we’ll build an interactive app for reserving a seat on an upcoming SpaceX launch. Think of it as an Airbnb for space travel! All of the data is real, thanks to the SpaceX-API.

To populate the views, our app’s data graph will connect to two data sources: a REST API and a SQLite database.

As we want this example to resemble a real-world Apollo app, so we’ll also add common useful features like authentication, pagination, and state management.

Full-stack apps with Apollo, a tutorial →

Countries, An example GraphQL API

If you’re looking for an example GraphQL API to play with, check out Countries.

A public GraphQL API for information about countries, continents, and languages.

curl 'https://countries.trevorblades.com/' \
  -H 'Content-Type: application/json' \
  -d '{"query":"{ country(code: \"BE\") { name, native, emoji, currency, languages { code, name } } }"}'

The schema’s available on the playground.

Countries Playground →
Countries Source (GitHub) →

Urql – A highly customizable and versatile GraphQL client for React

From the folks at FormidableLabs:

urql is a GraphQL client that exposes a set of React components and hooks. It’s built to be highly customisable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients.

// App.js
import { Provider, createClient } from 'urql';

const client = createClient({
  url: 'http://localhost:4000/graphql',
});

const App = () => (
  <Provider value={client}>
    <TodoList />
  </Provider>;
);
// TodoList.js
import React from 'react';
import { Query } from 'urql';

const getTodos = `
  query GetTodos($limit: Int!) {
    todos(limit: $limit) {
      id
      text
      isDone
    }
  }
`;

const TodoList = ({ limit = 10 }) => (
  <Query query={getTodos} variables={{ limit }}>
    {({ fetching, data, error, extensions }) => {
      if (fetching) {
        return 'Loading...';
      } else if (error) {
        return 'Oh no!';
      }

      return (
        <ul>
          {data.todos.map(({ id, text }) => (
            <li key={id}>{text}</li>
          ))}
        </ul>
      );
    }}
  </Query>;
);

I know I’ve posted about this one before, but a lot has changed since then. Biggest change is that Urql now supports React Hooks. The TodoList example from above would then become:

const TodoList = ({ limit = 10 }) => {
  const [res] = useQuery({
    query: getTodos,
    variables: { limit },
  });

  if (res.fetching) {
    return 'Loading...';
  } else if (res.error) {
    return 'Oh no!';
  }

  return (
    <ul>
      {res.data.todos.map(({ id, text }) => (
        <li key={id}>{text}</li>
      ))}
    </ul>
  );
};

Over at Egghead you can watch some lessons how to use urql with Hooks:

You will learn how to set up an Urql Provider component so that all of your React components have access to Urql. Then you will learn how to use 3 of Urql’s React Hooks:

  • useQuery
  • useMutation
  • useSubscription

There’s also a few good examples listed in GraphQL and Urql by Example on dev.to

Installation per npm/Yarn:

yarn add urql graphql

Urql →
Urql Source (GitHub)
Egghead: Introduction to Urql →

💁‍♂️ The “older” Apollo GraphQL Client also received hooks support recently …

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.