react-apollo-loader: Enhance React, Apollo, TypeScript and GraphQL Utilization
Tags: react, apollo, graphql, typescript
Published: 2019-12-08 15:16:37

---
title: react-apollo-loader: Enhance React, Apollo, TypeScript and GraphQL Utilization
published: true
description: 
tags: react, apollo, graphql, typescript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/c6wltl165l3jyc8oih1g.png
---

-------

**Edit: I solved the problem of tsc failure before webpack build in another package [graphql-let](https://github.com/piglovesyou/graphql-let#readme). I recommend to use it instead.**

-------


I just published an npm package of webpack loader.

👉 [react-apollo-loader](https://github.com/piglovesyou/react-apollo-loader#readme)
👉 [react-apollo-loader-example](https://github.com/piglovesyou/react-apollo-loader-example#readme), the example web app of react-apollo-loader

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

* You like [Apollo](https://www.apollographql.com/)
* You use [Apollo Client](https://github.com/apollographql/apollo-client#readme) 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](https://graphql-code-generator.com/) is awesome, especially in combination with [React Apollo](https://github.com/apollographql/react-apollo#readme). When you have such a GraphQL document (= a POST body of GraphQL query),

```graphql
query News {
  allNews {
    title
    link
    content
  }
}
```

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

```typescript
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.

```typescript
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](https://graphql-code-generator.com/docs/getting-started/documents-field#document-scanner) and execute [`graphql-codegen`](https://graphql-code-generator.com/docs/getting-started/#setup) 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.

```typescript
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](https://github.com/piglovesyou/react-apollo-loader#readme) does/allows behind the compilation when webpack detects GraphQL documents import. [Check out the Setup section](https://github.com/piglovesyou/react-apollo-loader#setup) 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👍