Ruby already has pipeline functionality

Josh LeBlanc — Tue, 18 Jun 2019 18:15:28 +0000

There's a big fuss going on in the ruby world about an upcoming operator inappropriately named "the pipeline operator".

A traditional pipeline operator lets you unwrap nested function calls like a(b(c(5))), by writing it in pipes. 5 |> c |> b |> a

The ruby one, however, just lets you do this:

1..5 
|> map { |i| i * 2 }
|> reduce(0) { |i, s| s + i }

rather than

(1..5)
.map { |i| i * 2 }
.reduce(0) { |i, s| s + i }

Brandon Weaver talks about it here:

Ruby 2.7: The Pipeline Operator

Brandon Weaver ・ Jun 14 '19 ・ 6 min read

#ruby

I wanted to expand on a comment from that thread from Johan Wentholt:

3limin4t0r • Jun 14 '19 • Edited

Overall a pretty informative post. However I would like to add that:

5.then(&double).then(&double).then(&increment).then(&double)

Could also be written as:

5.then(&double >> double >> increment >> double)

</div>

The feature that Johan Wentholt is using is called functional composition, and ruby 2.6 shipped with 2 operators for it. <<, for a(b()), and >> for b(a()). These operators allow you to compose procs out of existing procs. He's combining this feature with #then, which yields self to the given block.

For example, if you had the following procs

double -> { @1 * 2 }
add_two -> { @1 + 2 }

Then you could create a new proc, add_two_then_double

add_two_then_double = add_two >> double
# OR
add_two_then_double = double << add_two

add_two_then_double.call(5) #> 14

Up above, I gave an example of the pipeline operator by simplifying a(b(c(5))). With functional composition, you can write this as:

(c >> b >> a).call(5)

Of course, you can also apply ruby's new pipeline operator to this, to get c >> b >> a |> call(5)

So as a tl;dr:

double = -> { @1 * 2 }
add_two = -> { @1 + 2 }

# these are all double(add_two(5))

(add_two >> double)[5]
(add_two >> double).call(5)
add_two >> double |> call(5)
5.then(&add_two >> double)

Using React Hooks to simplify Apollo Client

Josh LeBlanc — Sat, 27 Apr 2019 10:55:47 +0000

I've been enjoying using apollo over the past few months, but one of my biggest pain points was dealing with graphql SDL scattered about the application, tiny queries just for local state, and writing a fair amount of boilerplate to get anything done.

For example, if you want to utilize bits and pieces of your local state for your components, you need to write something like this:

const GET_TOKEN = gql`
  {
    token @client
  }
`;

export default () => {
  const { data } = useQuery(GET_TOKEN);
  return <p>{data.token}</p>
}

That's a lot of boilerplate for what is just reading state.

What I've been using more recently, is moving all of the boilerplate into a hook.

// useToken.js
const GET_TOKEN = gql`
  {
    token @client
  }
`;
export default () => {
  const { data } = useQuery(GET_TOKEN);
  return data.token;
}

Now, when I want to read the token from the cache, all I have to do is call the hook.

// Token.jsx
export default () => {
  const token = useToken();
  return <p>{token}</p>
}

This isn't limited to just queries, and to certainly isn't limited to a single query/mutation per hook. Consider wanting to manage to state of a drawer in your app. You need to know if it's open or closed, and you want to be able to toggle that state.

// useDrawer.js
export const GET_DRAWER_OPEN = gql`
  {
    drawerOpen @client
  }
`;

export const TOGGLE_DRAWER_OPEN = gql`
  mutation ToggleDrawerOpen {
    toggleDrawerOpen @client
  }
`;

export default () => {
  const { data } = useQuery(GET_DRAWER_OPEN);

  return {
    drawerOpen: data.drawerOpen,
    toggleDrawerOpen: useMutation(TOGGLE_DRAWER_OPEN)
  }
}

You can also use these hooks in other hooks! Imagine a scenario where you need to get a user based on the current token. We already have a hook for the token, now all we need is a hook for the user.

// useCurrentUser.js
const GET_CURRENT_USER = gql`
  query GetCurrentUser($token: String) {
    currentUser(token: $token) {
      id
      username
      avatar
      email
    }
  }
`;

export default () => {
  const token = useToken();
  return useQuery(GET_CURRENT_USER, {
    variables: {
      token
    }
  });
}

Now, whenever you want the current user, you just use the useCurrentUser hook and you've got everything you need!

Using this method, I've consolidated all of the graphql SDL and logic into a hook that can be called within any functional component. In addition, the graphql SDL can be exported from the hook for use outside of your components.

I'm using apollo-react-hooks for the useQuery and useMutation hooks.

Forem: Josh LeBlanc

Ruby already has pipeline functionality

Ruby 2.7: The Pipeline Operator

Brandon Weaver ・ Jun 14 '19 ・ 6 min read

Using React Hooks to simplify Apollo Client