danielkcz

function useFormik(props) {
  // useState to keep the same observable around without recreating it on each render
  const [formik] = React.useState(() =>
    mobx.observable({
      values: props.initialValues || {},
      touched: {}
    })
  )

  // just mutate state, this function itself can be considered an action+reducer 

danielkcz

  React.useEffect(() =>
    mobx.autorun(() => {
      if (props.validate) {
        // MobX will see use of formik.values and rerun this function whenever it is mutated
        formik.errors = props.validate(formik.values);
      }
    }), []
  );

danielkcz

const formik = mobx.observable({
  values: props.initialValues || {},
  touched: {},
  errors: {},
  // scalar values needs to be wrapped into another object
  // otherwise after spreading MobX would lost track of it
  state: {
    isSubmitting: false,
    submitError: null
  }

danielkcz

// HOC approach was first and some still prefer it for whatever reasons
// Along with recompose you can do some real nasty tricks
const MutateMe = graphql(MutationDocument, { name: 'execute' })(({ execute }) => {
  // In comparison it's not a terrible way to execute a mutation
  // But naming the mutation with string 😆
  return <button onClick={() => execute({ variables: { secretName: 'Me' }})} />
})

// Mutation component is fine for simple cases, but gets ugly otherwise
const MutateMe = () => {

danielkcz

import { useQuery } from 'react-apollo-hooks'

const RandomGiphy = ({ tag }) => {
  const { data } = useQuery(
    RandomGiphyQuery, {
      variables: { tag }
    }
  }
  // handle loading & error states...
  return <img src={data.giphy.random.url} />

danielkcz

import { useQuery } from 'react-apollo-hooks'

const RandomGiphy = () => {
  const { tag } = useSettings()
  const { data } = useQuery(
    RandomGiphyQuery, {
      variables: { tag }
    }
  }
  // handle loading & error states...

danielkcz

import React from 'react'

const context = React.createContext(mobx.observable({
  tag: 'kittens'
}))

export const SettingsProvider = ({ children }) => {
  // we can employ some persistence here and load previous settings
  // for now just return children because context already has state set
  return children

danielkcz

import { observer } from 'mobx-react-lite'

const RandomGiphy = observer(() => {
  const settings = useSettings()
  const giphy = useRandomGiphy(settings.tag)
  return giphy ? <img src={giphy.url} /> : null
})

danielkcz

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

danielkcz

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions