Как записать в кеш apollo из компонента React без потери контекста «this» - PullRequest
Новая
       11

Как записать в кеш apollo из компонента React без потери контекста «this»

0 голосов
/ 28 июня 2018

У меня возникают проблемы при попытке прочитать из кэша apollo из компонента react, мутация работает и записывает на мой сервер и возвращает данные, но при передаче в функцию обновления, кажется, теряет контекст этого, когда в inMemoryCache.js

  • "apollo-cache-inmemory": "^ 1.2.5"
  • «реакция-аполлон»: «^ 2.1.4»
  • "apollo-boost": "^ 0.1.7"

TypeError: Невозможно прочитать свойство 'read' из неопределенного на ./node_modules/apollo-cache-inmemory/lib/inMemoryCache.js.InMemoryCache.readQuery

import React, { Component } from "react";
import { graphql } from "react-apollo";
import trim from "lodash/trim";

import AuthorForm from '../components/author-form';

import ALL_AUTHORS from "../graphql/getPosts.query";
import CREATE_AUTHOR from "../graphql/createAuthor.mutation";

class CreateAuthor extends Component {
  state = {
    errors: false
  };

  onSubmit(event) {
    event.preventDefault();

    const form = new FormData(event.target);

    const data = {
      firstName: form.get("firstName"),
      lastName: form.get("lastName")
    };

    if (!data.firstName || !data.lastName) {
      return this.setState({ errors: true });
    }

    this.create({
      firstName: trim(data.firstName),
      lastName: trim(data.lastName)
    });
  }

  async create(variables) {
    const { createAuthor } = this.props;
    this.setState({ errors: false });

    try {
      await createAuthor({
        variables,
        update: (cache, data) => this.updateCache(cache, data)
      })
    } catch (e) {
      this.setState({ errors: true })
    }
  }

  updateCache({ readQuery, writeQuery }, { data: { createAuthor }, errors }) {
    if (errors) {
      return;
    }
    const { allAuthors } = readQuery({
      query: ALL_AUTHORS,
      defaults: {
        allAuthors: []
      }
    });
    /*eslint-disable*/ console.log(allAuthors);
  }

  render() {
    return (
      <div>
        <AuthorForm onSubmit={this.onSubmit.bind(this)}/>
        <OnError/>
      </div>
    );
  }
}

export default graphql(CREATE_AUTHOR, { name: "createAuthor" })(CreateAuthor);

это связано со мной, привязав это к кнопке onSubmit? Если да, то как правильно прикрепить функцию к элементу, не теряя при этом контекста внутри компонента, и все же позволить кешу apollo функционировать должным образом.

1 Ответ

0 голосов
/ 01 июля 2018

Я терял контекст этого, потому что деконструировал первый аргумент. это то, на чем я остановился в конце.

Он выдает ошибки, когда в объекте ROOT_QUERY не было allAuthors, поэтому добавил его в мой оператор return.

это не похоже на идеальный способ обновления кэша, если по умолчанию параметр, передаваемый в readQuery, не предотвращает возникновение ошибки. 

 updateCache(cache, { data: { createAuthor }, errors }) {
    if (errors || !cache.data.data.ROOT_QUERY.allAuthors) {
      return;
    }

    const query = ALL_AUTHORS;

    const { allAuthors } = cache.readQuery({
      query,
      defaults: {
        allAuthors: []
      }
    });

    const data = {
      allAuthors: allAuthors.concat([createAuthor])
    };

    cache.writeQuery({
      query,
      data
    });
  }
...