cashay-playground-notes.md

Intro

• This is an analysis of the code from Replacing Relay with Redux.
• code:

Structure

• Connect(CashayBook)
• -- CashayBook
• --- Connect(RecentPosts)
• ---- RecentPosts
• ----- SinglePost
• ------ Connect(CommentContainer)
• ------- CommentContainer
• -------- Comment

Breakdown

Here's a bottom-up analysis. Skip to end and reach backwards if your brain works top down...

Comment

• Presentation only.
• props: Comment object. Has karma, content.

CommentContainer

• Smart container. Has GraphQL query, takes $postId. Explicitly lists needed fields (karma, content) needed by Comment child.
• Const mutationHandlers: createComment. Splices for optimistic update.
• mapStateToProps: uses postId. Creates a cashay query. Passes vars, key, mutation handlers.
• React component: Gets data from this.props.cashay.data.

CreateComment

• Takes postId
• Gens new uuid
• Invokes cashay.mutate('createComment', {variables, components: {comments: variables.postId}})

SinglePost

Dumb. No redux/cashay. Creates CommentContainer, passes in postId.

RecentPosts

• Smart: redux, cashay, with @connect.
• Has query queryRecentPosts ($count). this.props.cashay.data.recentProps is set to empty array before fetching (nice!)
• mutation createPost: has optimistic "OPTIMISTICAL" logic.
• mapStateToProps calls queryRecentPosts({variables: {count:2})
• Checks recentPosts.EOF to know if can fetch more.
• get2More: calls setVariables, increments count by 2.

CashayBook

• Smart: redux, cashay, with @connect.
• Query: postCount: getPostCount
• mutation createPost(): returns postCount. Incremented if optimistic.
• render() checks props.cashay.isComplete to know if querying done.

App

GraphiQL IDE. Hack index.js to include it.

schema.js

• Implements the "backend". Defines schema, queries, mutations.
• Imports hardcode data from static files in /DB.

graphiqlSchema.json

• npm run updateSchema generates this -- from src/schema.js.
• ... not sure where this is imported?

index.js

• new Cashay
• Injects 1-second timeout in transport with setTimeout to resolve promise.
• Sets up Redux with a cashayReducer.