andyrichardson

Docker 101

Grammar

• server: A physical machine connected to the web
• service: A deployed program (e.g. GraphQL endpoint / REST endpoint)
• environment: The OS that a service runs in

Before docker

andyrichardson

Websocket vs Subscriptions

What is a websocket

Websockets create a sustained connection between a client and a server

Messages can be sent on this connection in either direction.

It is a transport protocol.

andyrichardson

export const ttlCache = <K extends string, V = any>({ ttl, maxSize }: { ttl: number, maxSize?: number }) => {
  let cache: Record<K, { value: V; expiresAt: number } | undefined> = Object.create(null);

  return {
    set: (key: K, value: V) => {
      const keys = Object.keys(cache) as K[];
      if (maxSize && keys.length === maxSize) {
        delete cache[keys[0]]; 
      }

andyrichardson

import { useState, useCallback, useRef } from 'react';

export const useSynchronousReducer = <S, A>(
  reducer: (s: S, a: A) => S,
  initialState: S
) => {
  const stateRef = useRef(initialState);
  const [state, setState] = useState<S>(stateRef.current);

  const dispatch = useCallback<(a: A) => S>((action) => {

andyrichardson

.storybook/preview.tsx

import { addDecorator, DecoratorFn } from '@storybook/react';

/** Adds react-router context */
const routerDecorator: DecoratorFn = (Story, context) => {
  const router = context.parameters.router;

andyrichardson

About

Here's a quick example of how to get a 1-1 reproduction of storybook fixtures in jest.

Note: If you use storybook, definitely do this - it removes the need to set up context manually for jest testing

Create a providing component for jest

// .storybook/preview.tsx

andyrichardson

const isIntrospectionQuery = (arg: string) => {
  const query = parse(arg);
  const opDefs = query.definitions.filter(d => d.kind == "OperationDefinition") as OperationDefinitionNode[];

  // Must only have one definition
  if (opDefs.length > 1) {
    return false;
  }

  const selections = opDefs[0].selectionSet.selections;

andyrichardson

About

I absolutely failed at a timed challenge on how to serialize and deserialize a binary tree in JS.

This is my way of compensating for that failure 🤦‍

Hopefully this helps someone!

Data structure

andyrichardson

import { ApolloProvider } from '@apollo/react-hooks';
import { ApolloClient, RequestHandler, InMemoryCache, ApolloLink, Observable } from 'apollo-boost';
import { GraphQLError } from 'graphql';
import React from 'react';
import { Users } from './Users';

export default {
  title: 'Pages/Users',
};

andyrichardson

const useQuery = (query, opts) => {
  const source = useRef();
  const [state, setState] = useState();
  
  const makeRead = useCallback(() => {
    let status = "pending";
    let response;
    let promise = new Promise((resolve) => {
      source.current = pipe(
        client.createOperation(query, opts),