react-apollo-loader: Enhance React, Apollo, TypeScript and GraphQL Utilization

Edit: I solved the problem of tsc failure before webpack build in another package graphql-let. I recommend to use it instead.

I just published an npm package of webpack loader.

👉 react-apollo-loader
👉 react-apollo-loader-example, the example web app of react-apollo-loader

If some of the cases apply to you, you may like it.

• You like Apollo
• You use Apollo Client with TypeScript
• You have a valid GraphQL server
• You are willing to have typed GraphQL response

React Hooks to access data by GraphQL Code Generator

GraphQL Code Generator is awesome, especially in combination with React Apollo. When you have such a GraphQL document (= a POST body of GraphQL query),

query News {
  allNews {
    title
    link
    content
  }
}

GraphQL Code Generator elegantly turns it into React Hooks functions like this:

export function useNewsQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<NewsQuery, NewsQueryVariables>) {
  return ApolloReactHooks.useQuery<NewsQuery, NewsQueryVariables>(NewsDocument, baseOptions);
}

After you have it, you can use it inside of your function components.

const Home = (_: Props) => {
  // It's typed⚡️
  const { data, loading } = useNewsQuery();

  return (
    <ul>
      {data?.allNews.map(item => <li>{title}</li>)}
    </ul>
  );
};

To obtain the useful functions, you have to prepare for scanning GraphQL documents and execute graphql-codegen command. You also need to import the generated .tsx, and finally, you can use the data accessing functions.

That is the most flexible and fancy way to bind your GraphQL data and React components today. Here next, what if we can import the functions directly from .graphql?

Loader, a power of webpack 💪

The best way that the current Front-end technology offers to connect the source and the output would look like this.

import { useNewsQuery } from './news.graphql'

To achieve it, let's pull all the requirements together.

1. We need both GraphQL schema (= the definitions of what the GraphQL server can respond) and GraphQL documents (= the queries of what you want from the GraphQL server).
2. GraphQL Code Generator needs configurations of how your GraphQL documents should be compiled.
3. The generated content from .graphql is .tsx, which should be available only in the compiled output. No one wants the physical .tsx files.
4. Note that .tsx should also be compiled into .js.
5. We want .d.ts so that the IDEs can guess what functions/types the .graphql will return.

These are exactly what my react-apollo-loader does/allows behind the compilation when webpack detects GraphQL documents import. Check out the Setup section of react-apollo-loader to complete your preparation.

Caveats

There are cases you have to care for. Think about this circular dependency.

• To import the Hools function, you need to compile .graphql
• To compile .graphql, you need GraphQL schema
• To have GraphQL schema, you have to launch GraphQL server
• To launch GraphQL server, you have to compile the whole project including .graphql

This happens when you develop an app compiling both GraphQL server and Client-side together, such as a Server-Side Rendering app. In this case, you may want to proceed development step by step, where you first scaffold the GraphQL routes and generate schema.graphql (the static file version of GraphQL schema) and use it to compile import 'myQuery.graphql'.

Another thing you'll encounter is tsc failure. Note that our webpack compilation will generate .d.ts files, which your tsc command requires. So you may want webpack compilation first, and run type checking afterward. Although this is the same anytime you use GraphQL Code Generator, please note and don't waste your time to set up.

Thanks

As always, thanks for reading, I'd be happy if you make feedback👍