timothyde

onUpdate = (cache, { data: { createBoard } }) => {
    const { myBoards } = cache.readQuery({ query: MYBOARDS_QUERY });
    cache.writeQuery({
      query: MYBOARDS_QUERY,
      data: { myBoards: myBoards.concat([createBoard]) }
    });
    this.handleCancel();
  };

...

timothyde

onUpdate = (cache, { data: { createBoard } }) => {
    const { myBoards } = cache.readQuery({ query: MYBOARDS_QUERY });
    cache.writeQuery({
      query: MYBOARDS_QUERY,
      data: { myBoards: myBoards.concat([createBoard]) }
    });
    this.handleCancel();
  };

...

timothyde

...

<Mutation
  mutation={CREATE_MATCH_MUTATION}
  update={createUpdate}
  refetchQueries={['scores']}
>
  {(createMatchMutation, { loading, error }) => (
    <Button
      type="primary"

timothyde

render() {
  const { dataSource, value } = this.state;
  return (
    <ApolloConsumer>
      {client => (
        <div>
          <AutoComplete
            onSelect={this.onSelect}
            onSearch={value => {
              this.handleSearch({ value, client });

timothyde

handleSearch = async ({ value, client }) => {
  this.setState({
    value
  });

  if (value.length > 1) {
    const { data } = await client.query({
      query: USERS_QUERY,
      variables: { query: value, boardId: this.props.boardId }
    });

timothyde

const Perspective = styled.div`
  perspective: 800px;
  overflow: visible !important;
  transform-style: preserve-3d;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px;

timothyde

const PosedCover = posed(Cover)({
  open: {
    rotateX: '0deg',
    opacity: 1,
    transition: {
      type: 'spring',
      mass: 0.5
    },
    delay: 150
  },

timothyde

const PosedTopBar = posed(TopBar)({
  open: {
    opacity: 1,
    transition: {
      duration: 50
    }
  },
  closed: {
    delay: 200,
    opacity: 0,

timothyde

import styled from 'styled-components';
import posed from 'react-pose';

const Perspective = styled.div`
  perspective: 800px;
  overflow: visible !important;
  transform-style: preserve-3d;
  width: 100%;
  display: flex;
  flex-direction: column;

timothyde

const Cover = styled.div`
  background-color: white;
  z-index: 100;
  position: absolute;

  border-radius: 8px;

  height: 80px;
  width: 90%;