jgoux

import React from 'react'
import styled, { injectGlobal, css } from 'styled-components'
import Grid from './Grid'

injectGlobal`
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

jgoux

import React, { Component } from 'react'
import { findDOMNode } from 'react-dom'
import R from 'ramda'
import injectSheet from 'react-jss'
import Tether from 'react-tether'
import { List } from 'react-virtualized'

const defaultState = {
  input: {
    searchText: ''

jgoux

During development, I want to be able to proxy my GraphQL queries to my own GraphQL server at http://localhost:3000/graphql

I configured Gatsby like this :

module.exports = {
  proxy: {
    prefix: '/graphql',
    url: 'http://localhost:3000'
  }
}

jgoux

In the context of a fullstack web application here is the workflow I'd like to have for a great DX.

1. Client-side

1.1 Start from the UI, build it screen by screen in isolation with something like storybook/react-cosmos.

1.2 For a screen, write your data needs in term of graphql queries, mutations and/or subscriptions.

1.3 If you use a strongly typed language (like Purescript or Reason) it should be able to fail at compile time because schema's types are missing. For JS, the tools (cli, vscode extension...) should be able to point the undefined types, queries, mutations and subscriptions (if you use SDL in gql tag for example).

jgoux

import { gql } from "apollo-server-koa"

export let typeDefs = gql`
  type Action {
    id: ID!
    libelle: String!
    active: Boolean!
  }
`

jgoux

async function withAuthenticatedPgClient(
  { pgPool, needTransaction, sqlSettingsQuery },
  fn
) {
  const provideClient = async pgClient => {
    if (sqlSettingsQuery) {
      await pgClient.query(sqlSettingsQuery)
    }
    return await fn(pgClient)
  }

jgoux

In all of these sections, I assume you want to use TypeScript as much as possible.

Backend / API

REST (OpenAPI)

https://strapi.io/ (no TS support ATM... see https://medium.com/@alexdevmotion/typescript-for-strapi-lifes-too-short-to-es5-1cc852fbf504)

Frontend friendly package

Restful React : https://github.com/contiamo/restful-react

jgoux

  /**
   * This does not show surrounding code like referenced types.
   */

  resultMutationField('inviteUserToProject', {
    input(t) {
      t.nonNull.id('userHandle')
      t.nonNull.id('projectId')
      t.nonNull.field('role', {
        type: 'ProjectRole',

jgoux

import typescriptPlugin from "@typescript-eslint/eslint-plugin";
import typescriptParser from "@typescript-eslint/parser";
import prettierConfig from "eslint-config-prettier";
import importPlugin from "eslint-plugin-import";
import nodeImportPlugin from "eslint-plugin-node-import";
import prettierPlugin from "eslint-plugin-prettier";
import perfectionistPlugin from 'eslint-plugin-perfectionist';
import unusedImportsPlugin from "eslint-plugin-unused-imports";
import globals from "globals";