snapp

Snapp is a GraphQL Web framework.

Concept

GraphQL provides not only many solutions to Web Front-end, but a way to think how Web application can organize data, resolved in both server-side and client-side.

Snapp boosts up data binding process in web app through GraphQL, with HMR development environment and production build functionality included out of the box.

Features:

• Able to import { useData } from './query.graphql', powered by react-apollo and GraphQL Codegen
• Automatically wires-up code including schema, resolver to build GraphQL server
• TypeScript, React, Passport and SSR are built-in (and mandatory to use)
• Builds optimised bundle

Getting Started

# Initialize project
mkdir my-snapp && cd $_
npm init --yes

# Install dependencies
npm install -D snapp
npm install -S react react-dom  # Peer deps

# Place project boilerplate files
npx snapp init
npx snapp codegen  # Generates wiring-up source and some .graphql.d.ts
npx tsc  # Enjoy types

# Start development
npx snapp start  # Popup browser. Enjoy HMR

# Build production app
npx snapp build

# Run production app
cd build
npm install
node server.js

Production build doesn't depend on snapp as it's dev environment 👍

Special Directories

Snapp recognized six directories in project root as special:

data and states - Your GraphQL Definitions

• ./data/*.graphql
• ./data/*/*.ts
• ./state/*.graphql
• ./state/*/*.ts
• ./state/rootValue.ts

(root)
  |
  +--+ data   // Server-side GraphQL Types and its resolvers go hrere
  |     +
  |     |
  |     +--+ schema.graphql   // `data/*.graphql` are recognized
  |     |                     // as GraphQL schema. Define your types here
  |     |
  |     +--+ Query            // Dirs of `data/[A-Z]*` are recognized
  |     |     |
  |     |     +---+ posts.ts  // `data/[A-Z]*/*.ts` are recognized as
  |     |     |               // field resolvers
  |     |     |               // This resolves `query { posts }`
  |     |     |
  |     |     +---+ users.ts  // resolves `query { users }`
  |     |
  |     +--+ Mutation
  |     |     |
  |     |     +---+ post.ts   // resolves `mutation { post }`
  |     |
  |     +--+ Post   // Any `data/[A-Z]*/*.ts` are recognized as types
  |     |     |
  |     |     +---+ comments.ts // resolves `comments` field of type `Post`
  |     |
  |     +--+ lib    // Lowercase dirs are ignored by framework
  |           |
  |           +---+ myFns.ts  // Also ignored
  |
  |
  +--+ state  // Client-side GraphQL Types and its resolvers go hrere
  |     |
  |     +--+ rootValue.ts   // `state/rootValue.ts` indicates
  |     |                   // initial state for users
  |     |
  |     +--+ schema.graphql // Same as server-side, `state/*.graphql` are
  |     |                   // recognized as GraphQL Schema, but
  |     |                   // this is only for client-side, such as
  |     |                   // `isModalOpen` or `selectedRows`
  |     +--+ Query
  |     |     |
  |     |     +---+ isModalOpen.ts  // resolve `query { isModalOpen @client }`
  |     |     |
  |     |     +---+ selectedRows.ts  // resolve `query { selectedRows @client }`
  |     |
  |     +--+ Mutation
  |     |     |
  |     |     +---+ openModal.ts  // resolve `mutation { openModal @client }`
  |     |     |
  |     |     +---+ selectRows.ts  // resolve `mutation { selectRows @client }`
  |     |
  |     +--+ lib    // Lowercase letter dir is ignored by framework
  |

routes and components - Your Pages and GraphQL Documents (e.g. query {})

• ./routes/**/*.tsx
• ./routes/**/*.graphql
• ./components/**/*.graphql

(root)
  |
  +--+ routes   // Dirs and files of `routes/**/*.tsx` indicates your URL routes
  |     +
  |     |
  |     +--+ index
  |     |     |
  |     |     +---+ index.tsx // `${hostname}/` is routed here
  |     |     |
  |     |     +---+ posts.graphql // `routes/**/*.graphql` are recognized as
  |     |     |                   // GraphQL Documents (queries and mutations)
  |     |     |
  |     |     +---+ blaa.css  // Other extensions are ignored from framework
  |     |
  |     +--+ posts
  |     |     |
  |     |     +---+ index.tsx // `${hostname}/posts` is routed here
  |     |
  |     +--+ about.tsx  // `${hostname}/about` is routed here
  |
  +--+ components
  |     |
  |     +--+ modalState.graphql // `components/**/*.graphql` are also recognized
  |     |                       // as GraphQL Documents

Specify page titles and other metadata with snapp/Head component.

const title = 'Home';
export default const Home = () => (
    <div>
        <Head>
            <title>{title}</title>
        </Head>
        <h1>{title}</h1>
    </div>
);

props.routeContext is available in all route components.

export type RouteContextTypes = {
  pathname: string; // ex.) /about/me
  query?: ParsedQuery<string>; // ex.) q of ?q=graphapp
  params?: QueryParams; // ex.) id of /posts/:id
};

A leading underscore of route directory/file name indicates route params.

/* ./routes/posts/_id.tsx */
export default const PostDetail = (props) => (
  <div>{props.routeContext.params.id}</div>
);

public - Your static files

• ./public/**

All files located under public are served as static files by your application. Put files such as favicon.ico and robots.txt here.

config - Configure Application

• ./config/*

You can overrides framework files in config. node_modules/snapp/dist/config/{modules} by placing one with the same file name.

Example:

./config/Html.tsx

import { HtmlPropTypes } from 'snapp/types';

export default const Html = (prop: HtmlPropTypes) => (
  <html>
    <head></head>
    <body>{prop.children}</body>
  </html>
);

APIs

Your can import modules in node_modules/snapp/dist/app by `import 'snapp/{module}'.

Example:

import useStyles from 'snapp/useStyles';
import s from './post.css';

export default const Post = (props: {}) => {
  useStyles(s);
  return (...);
};

Attributes

Bound technology stack:

• All the Apollo toolset
• Webpack for development and production build
• TypeScript
• React
• Passport for authentication

Heavily inspired by:

• Apollo for its GraphQL perspective
• Next.js for its webpack magic and File System based routing
• React Starter Kit for its decent modern boilerplate defaults

License

MIT