/graphql-koa-apollo-react-boilerplate

BFF (Node.js + koa + GraphQL + Apollo) and front (React + GraphQL + Apollo) boilerplate

Primary LanguageTypeScript

graphql-koa-apollo-react-boilerplate

It is a boiler plate for developing BFF and front end by schema drive.

GraphQL でスキーマ駆動開発導入したら開発効率がアップするぞ！！ - Qiita

Get started

for client

$ cd client
$ npm install
$ npm start

for server

$ cd server
$ npm install
$ npm run mock

about schema

It is managed by common / graphql / schema.graphql. Generate types andhooks based on this schema.

$ cd common
$ npm install
$ npm run gen

Generated on client and server respectively.

client/gen/actions.tsx
server/gen/types.ts

How to use useQuery on client

import * as React from "react";
import { useUsersQuery } from "src/gen/actions";
import Loading from "src/components/atoms/Loading";

const Content: React.FunctionComponent<{}> = () => {
  const { data, loading } = useUsersQuery();
  if (loading) return <Loading fetching={loading} />;
  if (data && data.users) {
    return (
      <React.Fragment>
        {data.users.map((e, key) => {
          return (
            <div key={key}>
              <p>{e.name}</p>
            </div>
          );
        })}
      </React.Fragment>
    );
  }
  return null;
};

export default Content;