KATT

{
  
}

KATT

Disclaimer - I'm a massive GraphQL-fan and been building APIs and React-apps with (in production) since 2016. All the criticism below are specifically to do with Hasura and not GraphQL itself.

Explicit types

i have an app that has a type of product listings where something like "price" is optional but price consists of several fields (amount, currency [and more that are irrelevant for this point]) so in the db they all have to be nullable, which is fine, but they are always presented as a group typically, as a consumer you'd want a nullable price: Price but i end up having to write custom client logic that I thought I was done with since starting making backends in graphql 4-5 years ago

KATT

// https://github.com/apollographql/react-apollo/issues/3735#issuecomment-562915341

import ApolloClient, { ApolloError } from 'apollo-client';
import { DocumentNode } from 'graphql';
import { useEffect, useState } from 'react';
import { useApolloClient } from '@apollo/react-hooks';

export interface HookOptions<TData extends object, TVariables> {
  variables?: TVariables;
  mergeIntoCache?: (

KATT

// Next.js' `_app.js` file

import Head from 'next/head';
import { useEffect, useState } from 'react';
import '../styles/main.scss';

function useIsMounted() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {

KATT

Record<string, x | undefined>

Represent maps

// rather than 
const map: {[ key: string ]: string} = {
  foo: 'bar',
}

KATT

import { useEffect, useState, useRef } from 'react';
import Talk from 'talkjs';
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

export type TalkJSState =
  | {
      status: 'error';
      error: Error;
      session: null;
    }

KATT

// gitignore this file

module.exports = {
  HASURA_URL: 'https://myapp.herokuapp.com/v1/graphql',
  HASURA_ADMIN_SECRET: 'xxx',
};

KATT

type Maybe<T> = T | null | undefined

function defaultValue<T>(value: Maybe<T>, fallback: T): T {
    return value ?? fallback
}

KATT

import { someThing } from './someThing';


console.log(someThing); // <-- Here you just just need to start typing `some..` in VSCode and it'll do the import automatically

KATT

import { cleanEnv, str, num, url } from 'envalid'

const env = cleanEnv(process.env, {
  GRAPHQL_URL: url({
    devDefault: 'http://localhost:4000/graphql',
  }),
  PORT: num({
    devDefault: 3000,
  }),
  A: str(),