jamesplease

@media all and (display-mode: standalone) {
  body {
    background-color: #000;
  }
}

jamesplease

1. CASE SENSITIVE EQUALS: Case-sensitive equality trumps all. These will be first. (ex. France would match France, but not france)
2. EQUALS: Case-insensitive equality (ex. France would match france)
3. STARTS WITH: If the item starts with the given value (ex. Sou would match South Korea or South Africa)
4. WORD STARTS WITH: If the item has multiple words, then if one of those words starts with the given value (ex. Repub would match Dominican Republic)
5. CASE STARTS WITH: If the item has a defined case (camelCase, PascalCase, snake_case or kebab-case), then if one of the parts starts with the given value (ex. kingdom would match unitedKingdom or united_kingdom)
6. CASE ACRONYM If the item's case matches the synonym (ex. uk would match united-kingdom or UnitedKingdom)
7. CONTAINS: If the item contains the given word (ex. America would match South America)
8. ACRONYM: If the item's acronym is the given value (ex. us would mat

jamesplease

render() {
  return (
    <div>
      {awaiting && <div>Still waiting to hear back...</div>}
      {succeeded && <div>The request has succeeded!</div>}
      {failed && <div>The request failed for some reason!</div>}
      {streaming && <div>We have a response...receiving the data is underway</div>}
    </div>
  );
}

jamesplease

{
  // The response was received, and the data is currently streaming.
  // Note: this can be `true` even when the request fails (if the body of
  // the error is being streamed)
  streaming: <Boolean>,

  // The response has not yet been returned by the server, OR it has been
  // returned and the headers are still streaming (it appears that the headers)
  // are immediately available at the same time that the Response object is
  // made available to you)

jamesplease

// res.bodyUsed is true immediately after the method is called. That is awesome!

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => {
    console.log('Immediately when the res is received:', res.bodyUsed);

    const body = res.json()
      .then(stuff => {
        console.log('Ok response from res.json', stuff);
        console.log('Body read as JSON', res.bodyUsed);

jamesplease

const fetchBook = createFetcher(
  (options) => {
    return fetch(`/books/${options.bookId}`);
  },
  {
    attributeFetchers: {
      author(bookId) {
        return getAuthorForBookId(bookId)
      }
    }

jamesplease

Utilities for bad APIs

Goals:

• Write resolvers that allow you to do "complex" queries in one pop, such as fetching the entire definition of an object
• "Push" updates so that the slowest endpoint doesn't hold up the entire request

// Create a fetcher. Fetches some data 
const fetchBook = createFetcher(

jamesplease

• Built on top of the Fetch API
• Split loading state into two Booleans (awaiting response and streaming)
• cancellation API, even if it is just "ignoring" the response
• API that maps to Promises. Likely a wrapper on top of the Response object
• Partial success / partial failure (meaning one single response is returned with partial success. In other words, this is independent from streaming)
• Streaming (could be multiple requests making up the stream under-the-hood, or just one that is piping data to you gradually, i.e. JSONS)
• "Middleware" - could be a pattern rather than a library. It is just a pattern to transform data into useful formats. For instance, normalization middleware for inconsistent APIs.

jamesplease

State

• Each resource requires a "type" (book, author, comment, etc)
• Each resource requires an ID (a unique identifier. must be a string or a number)
• Stored in context (or a context polyfill)
• Data is normalized by ID
• A location for By-ID lookup
• Support for an arbitrary number of ordered lists (supports server-side ordering, and any situation when the client needs an ordered list or grouping of resources)
• Support for client-side metadata for resources (could be used for forms, or if data is modified, or

jamesplease

import Composer from 'react-composer';
import Component from 'react-component-component';

<Composer
  components={[
    <Fetch {...fetchProps} />,
    ([firstResult]) => {
      // Ultimately, you return a Fetch that is lazy.
      //
      // When `firstResult` changes from `loading` to succeeded,