Мутация и реквизиты запросов не переданы компоненту - PullRequest
Новая
       11

Мутация и реквизиты запросов не переданы компоненту

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

Когда вызывается мой обработчик, я получаю сообщение об ошибке, что мутация не является функцией. По какой-то причине моя мутация и запрос не привязаны к моему компоненту, когда я смотрю на this.props.

ОШИБКА: 

RelationshipDropDown.js:58 Uncaught TypeError: this.props.deleteSystemDatasets is not a function
    at RelationshipDropDown.deleteHandler (RelationshipDropDown.js:58)
    at onClick (RelationshipDropDown.js:92) ...

Я пробовал несколько стилей синтаксиса, пытаясь передать мутацию и запрос компоненту, и использовал стиль в других компонентах без ошибок. Может кто-нибудь объяснить, почему их не пропустили? Не уверен, что мне не хватает. 

    import React from 'react';
import ReactDOM from 'react-dom';

//Import GraphQL
import gql from 'graphql-tag';
import { graphql, compose } from 'react-apollo';


export class RelationshipDropDown extends React.Component{
    constructor(props){
        super(props);
        this.state = {key:null, system:null};
    };
      deleteHandler() {
        if (this.state.key) {
            console.log(this.state.key, this.state.system)
            console.log(this.props)
            this.props.deleteSystemDatasets({
                variables:{key: this.state.key, datasets: [this.state.system]},
                refetchQueries: [{ query: this.props.getSystemDatasets , variables: {system:this.state.system} }]
            });
        console.log("Dataset " + this.state.key + "Deleted From " + this.state.system);
          }
       };

      handleChange(e){
        let obj = JSON.parse(e.target.value)
        console.log(e.target.value)
        console.log(this.props)
        this.setState({key: obj.key, system: obj.system});
      };

    render(){
        return (
          <div id="relationship-select">
            <select onChange={(e) => this.handleChange(e)} className="select-menu" type="select">
              {this.props.dataArray}
            </select>
            <br/>
            <button onClick={() => this.deleteHandler()}>delete</button>
            <button>edit</button>
          </div>

        )
    }
}

export const GET_SYSTEM_DATASETS = gql`
  query getSystemDatasets($system: String!){
          System(name:$system){
               datasets{
                   name
               }
          }
      }
`;

export const DELETE_SYSTEM_DATASET_RELATIONSHIP = gql`
    mutation deleteSystemDatasets($systemKey: ID!, $datasetKeys: [ID!]!){
    deleteSystemDatasets(key:$systemKey, datasets: $datasetKeys)
    }
`;

const deleteSystemDatasets = graphql(DELETE_SYSTEM_DATASET_RELATIONSHIP, {name: "deleteSystemDatasets"});
const getSystemDatasets = graphql(GET_SYSTEM_DATASETS, {name: "getSystemDatasets"});

export default compose(deleteSystemDatasets, getSystemDatasets)(RelationshipDropDown);

1 Ответ

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

В итоге это была утомительная ошибка, которую я упустил из виду. Когда я выполнял экспорт по умолчанию, в другом файле, где я рендерил компонент <Component/>, я импортировал компонент, как если бы я использовал именованный экспорт export {Component} через import {Component} from '../path/to/component'. Все, что мне нужно было сделать, это удалить фигурные скобки из моего оператора import, и теперь мои реквизиты содержали мои запросы и мутации.

...