dburles

Optimal REST API design for GraphQL with DataLoader

This document outlines an approach to designing REST API’s to optimise requests made from a GraphQL server in combination with DataLoader.

Entity relationships

Entities should always include their own id.

One-to-one relationships should be exposed through a field on the entity and never through denormalisation.

dburles

dburles

// A simple proof-of-concept Deno HTTP server that parallelises requests for JavaScript modules.

// This is achieved by resolving the module graph for each requested resource 
// using Deno graph (https://github.com/denoland/deno_graph).
// The result is converted into a `link` header (https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/modulepreload).

// For example, if 'a.js' imports 'b.js' and 'b.js' imports 'c.js' (and so on..),
// a request for 'a.js' will yield the following `link` header:
// <http://domain/b.js>; rel="modulepreload", <http://domain/c.js>; rel="modulepreload", <http://domain/d.js>; rel="modulepreload"
// In turn, the requests for module a's dependencies are made together.

dburles

// https://codesandbox.io/s/createsuspendevent-7yuzl?file=/src/Test.js
const createSuspendEvent = (fn) => {
  return () => {
    createResource(() => {
      return new Promise((resolve) => {
        fn((cleanup) => {
          if (typeof cleanup === 'function') {
            cleanup();
          }
          resolve();

dburles

const isIE11 = typeof window !== 'undefined' && !!window.msCrypto;

dburles

import { MysticalProvider } from 'mystical';
import PropTypes from 'prop-types';
import theme from '../lib/theme';

const App = ({ Component, pageProps, cache }) => {
  return (
    <MysticalProvider theme={theme} cache={cache}>
      <Component {...pageProps} />
    </MysticalProvider>
  );

dburles

import { MysticalProvider } from 'mystical';
import PropTypes from 'prop-types';

const App = ({ Component, pageProps, cache }) => {
  return (
    <MysticalProvider cache={cache}>
      <Component {...pageProps} />
    </MysticalProvider>
  );
};

dburles

import React, { useState, useRef, forwardRef, useEffect } from 'react';
import { createPortal } from 'react-dom';

const useEnsuredForwardedRef = forwardedRef => {
  const ensuredRef = useRef(forwardedRef && forwardedRef.current);

  useEffect(() => {
    if (!forwardedRef) {
      return;
    }

dburles

import hashSum from 'hash-sum';
import React from 'react';

const camelDash = (string) =>
  string.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);

const construct = (object) =>
  Object.keys(object)
    .map((key) => `${camelDash(key)}:${object[key]};`)
    .join('');

dburles

import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';

let globalIdentifier = 0;

const camelDash = string =>
  string.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`);

const construct = object =>
  Object.keys(object)
    .map(key => `${camelDash(key)}:${object[key]};`)