Skip to content

Instantly share code, notes, and snippets.

Avatar
I'm the fastest meme alive

Julien Goux jgoux

I'm the fastest meme alive
View GitHub Profile
@jgoux
jgoux / exampleUsage.ts
Created Mar 17, 2021 — forked from jasonkuhrt/exampleUsage.ts
Abstraction for defining result fields in Nexus
View exampleUsage.ts
/**
* 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
jgoux / index.md
Last active Feb 23, 2020
Modern web app stack
View index.md
View plugin.js
async function withAuthenticatedPgClient(
{ pgPool, needTransaction, sqlSettingsQuery },
fn
) {
const provideClient = async pgClient => {
if (sqlSettingsQuery) {
await pgClient.query(sqlSettingsQuery)
}
return await fn(pgClient)
}
View action.js
import { gql } from "apollo-server-koa"
export let typeDefs = gql`
type Action {
id: ID!
libelle: String!
active: Boolean!
}
`
@jgoux
jgoux / YOLO.md
Last active Jan 16, 2019
Outside-in type directed GraphQL
View YOLO.md

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
jgoux / README.md
Last active Jan 16, 2019
Proxy issue with Gatsby
View README.md

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
jgoux / Autocomplete.js
Last active Jun 21, 2017
Material UI Autocomplete
View Autocomplete.js
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: ''
View App.js
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
jgoux / database.js
Last active Mar 13, 2017
Database service
View database.js
import R from 'ramda';
import knex from 'knex';
export const connect = knex;
export const disconnect = async client => {
return await client.destroy();
};
export const withClient = R.curry(async (config, cb) => {
@jgoux
jgoux / App.jsx
Created Feb 15, 2017
Let's rebuild the GithubGist interface with react !
View App.jsx
// I leave out all the props & state, this is not the point here
// Level 1, can you directly grasp what's the page purpose?
// Assuming the component is in a "pages" folder, no need to append "Page" to it, it's all about context!
// Same apply for the Form component, the context says that we're here to create a new gist, no need to overthink the name.
// Putting the boring layout stuff into it's own component so you can focus on the page's domain.
const NewGist = () => (
<Layout>
<LastGistsNav />
<Form />