Как установить типы машинописи для ответа GraphQL AWS в React? - PullRequest
Новая
       45

Как установить типы машинописи для ответа GraphQL AWS в React?

0 голосов
/ 09 февраля 2019

У меня есть компонент реагирования в машинописном тексте, и я хочу установить результаты запроса appsync graphql для свойства в состоянии. 

import React, { Component } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import {ListProjectsQuery} from './API'
import {listProjects } from './graphql/queries';

class App extends Component<{}, {
  projects:ListProjectsQuery
}>  {
  state = {
    projects: null
  };
  async componentDidMount() {
    const projects = await API.graphql(graphqlOperation(listProjects));
    this.setState({ projects });
  }

  ...

Как определить свойство состояния по умолчанию, чтобы эта работа работала?

Я обнаружил похожую проблему в проблемах GitHub с усилением, но это решение было в контексте функционального компонента без сохранения состояния.Я использую компонент с отслеживанием состояния.

В зависимости от того, что я пытаюсь сделать, я получаю одну из трех ошибок.

Приведенный выше код выдает Type 'null' is not assignable to type 'ListProjectsQuery'..

Это имеет смысл, поэтому я пытаюсь отобразить фигуру в состоянии следующим образом: 

state = {
    projects: {listProjects: {items: [{name: ''}]}}
  }

, что заставляет ее выбросить Types of property 'projects' are incompatible.

Мне либо говорят, что Property does not exist on type 'Observable<object>' или мне говорят, что форма значения состояния по умолчанию несовместима.

Наконец, я попытался использовать интерфейс, как в примере, который я нашел: 

interface IListProjectQuery {
  projects: ListProjectsQuery;
}

, а затем я ссылаюсьинтерфейс 

class App extends Component<
  {},
  {
    projects: IListProjectQuery;
  }
>

и он выдает следующую ошибку Type '{ projects: null; }' is not assignable to type 'Readonly<{ projects: IListProjectQuery; }>'.

Какое значение я должен предоставить свойству состояния по умолчанию для того, чтобы оно сделало машинопись счастливой?

Импорт ListProjectsQuery генерируется автоматически с помощью codegen ampify / appsync, псевдоним типа выглядит так: 

export type ListProjectsQuery = {
  listProjects:  {
    __typename: "ModelProjectConnection",
    items:  Array< {
      __typename: "Project",
      id: string,
      name: string,
      organisation:  {
        __typename: "Organisation",
        id: string,
        name: string,
      } | null,
      list:  {
        __typename: "ModelListConnection",
        nextToken: string | null,
      } | null,
    } | null > | null,
    nextToken: string | null,
  } | null,
};

1 Ответ

0 голосов
/ 09 февраля 2019

Сделайте вашу собственность необязательной: 

class App extends Component<{}, {
  projects?: ListProjectsQuery //<<== note the question mark
}>  {
  state = {
    projects: null
  };
  async componentDidMount() {
    const projects = await API.graphql(graphqlOperation(listProjects));
    this.setState({ projects });
  }
...