Using React Hooks to simplify Apollo Client

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.