danielkcz

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

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

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

// 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

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

  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

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

import { Trans } from '@lingui/react'
import React, { Children } from 'react'


interface IProps {
  children: ReactNode | string
}

interface IState {
  refs: React.RefObject<Trans>[]

danielkcz

import { ApolloQueryResult } from 'apollo-client'
import { DocumentNode } from 'graphql'
import React from 'react'
import { graphql } from 'react-apollo'
import { MutationFunc, MutationOpts } from 'react-apollo/types'

interface IQueryProps<TResult, TVariables = {}> {
  render(
    execute: (variables?: Partial<TVariables>) => Promise<TResult>,
    executionOptions?: MutationOpts<TVariables>,

danielkcz

declare module 'mobx-react-form' {
  export default MRF.MobxReactForm
}

type Dictionary<T> = { [key: string]: T }

declare namespace MRF {
  class MobxReactForm {
    constructor(options: MRF.Options, settings?: MRF.Settings)
    isValid: boolean

danielkcz

import { types } from 'mobx-state-tree'

const SECOND = 1 * 1000
const MINUTE = 60 * SECOND

export const TimingModel = types
  .model('Timing', {
    bySecond: types.optional(types.number, Infinity),
    byMinute: types.optional(types.number, Infinity),
    autoStart: false,