가입이 완료되면 왜 데이터가 사라지나요?

-1

구독이 완료 될 때 데이터에 대해 정의되지 않은 이유는 무엇입니까? 내 props.data.allLocations에 대한 정의되지 않은 부분이 어디에서 왔는지 파악하려고합니다. 어떤 도움을 주시면 감사하겠습니다. 이 들여다 모든 사람에게 위해 요소가입이 완료되면 왜 데이터가 사라지나요?

// 높은

export const LocationList = graphql(

     gql` 
     query ($site: ID!) { 
      allLocations(
      filter: { 
      site: { 
       id:$site 
      } 
      } 
     ) { 
      id 
      name 
      } 
     } 
      `, 


    { 

     options: (ownProps)=>({ 
     variables: { 
      site: ownProps.site 
     }, 
     }), 
     //props were injected from the JSX element 
     props: props => { 

      return { 
      data: props.data, 
      subscribeToData: params => { 
       return props.data.subscribeToMore({ 
       document: 

        gql` 
        subscription newLocations { 
         Location { 
         mutation 
         node { 
          id 
          name 
         } 
         } 
        } 
        `, 
       variables: { 
        //Empty for now 
        //site: props.site, 
       }, 
       updateQuery: (previousState, {subscriptionData}) => { 

        if (!subscriptionData.data) { 
           return previousState; 
          } 

       var newArray =[subscriptionData.data.Location.node].concat(previousState.allLocations) 
       var newState = { 
        ...previousState, 
        allLocations: [ 
        { 
         ...subscriptionData.data.Location.node 
        }, 
         ...previousState.allLocations 
        ], 

       }; 

       return newState 
       } 
       }) 
      }, 

      } 
     }, 
     onError: (err) => console.error(err) 
      })(EntityList)

// 목록 구성 요소

class EntityList extends Component { 


    componentWillReceiveProps(newProps) { 
    if (!newProps.data.loading) { 
     console.log(newProps) 
     if (this.subscription && this.props.hasOwnProperty('subscribeToData')) { 
     if (newProps.data.allLocations !== this.props.data.allLocations) { 
      console.log("Resubscribe") 
      // if the todos have changed, we need to unsubscribe before resubscribing 
      this.subscription() 
     } else { 
      console.log('else') 
      // we already have an active subscription with the right params 
      return 
     } 
     } 
     this.subscription = this.props.subscribeToData(newProps) 

    }} 


    render() { 

    if (this.props.data.loading) { 
     return (<div>Loading</div>) 
    } 


    var Entities = []; 
    for(var key in this.props.data) { 

     if(this.props.data[key] instanceof Array){ 
      Entities = Entities.concat(this.props.data[key]) 

      //console.log(this.props.data[key]) 
     } 
     } 


    return (
     <div className='w-100 flex justify-center bg-transparent db' > 
     <div className='w-100 db' > 
      {Entities.map((entity) => 

      ( 
       <EntityListView 
       user={this.props.user} 
       key={entity.id} 
       entityId={entity.id} 
       name={entity.name} 
       profilePic={(entity.profilePic)?entity.profilePic.uuid : this.props.defaultPic.uuid} 
       clickFunc={this.props.clickFunc} 
       /> 
      ))} 

     </div> 
     </div> 
    ) 
    } 
}

출처

2017-04-11 Joseph Barnes

코드가 올바르게 포맷되어 있는지 확인하십시오

export const LocationList = graphql(gql'..., {options: (ownProps)=>({ variables: { site: ownProps.site }})})( Subscriber(gql'..., propName:"allLocations", modelName:"Location", )(EntityList))

감사 :

const Subscriber = (document, config) => { return (WrappedComponent) => { return class extends Component { constructor(props) { super(props) this.state={} this.subscription = null } componentWillReceiveProps(nextProps) { console.log(nextProps) if (!this.subscription && !nextProps.data.loading) { console.log("Sucess") let { subscribeToMore } = this.props.data this.subscription = [subscribeToMore( { document: document, updateQuery: (previousResult, { subscriptionData }) => { console.log(subscriptionData) var newResult = [subscriptionData.data[config.modelName].node].concat(previousResult[config.propName]) console.log(newResult) return { //"allItems" [config.propName]: newResult, } }, onError: (err) => console.error(err), } )] this.setState({}); } } render() { if (this.props.data.loading) { return (<div>Loading</div>) } return ( <WrappedComponent {...this.props} /> ) } } } } export default Subscriber /*prop config = { propName: "string", //allItems // from query //so I do not have to parse the gql query (would have to recieve from parent) modelName: "string" //Item // from subscribe //so I do not have to parse the gql subscribe } */

내가 지금처럼 내 구성 요소를 포장! 'graphql'을 호출하기 전에'gql'에 대한 호출 결과를 별도의 변수로 추출한 다음 호출에서이 변수를 참조하여보다 쉽게 읽을 수 있도록하는 것이 좋습니다. 정확한 오류 메시지에 대한 정보를 조금 더 제공하십시오. 그렇지 않으면 도움이 어려울 수 있습니다. – nburk

감사합니다. 실제로 오류 메시지가 표시되지 않습니다. 구독 함수를 소도구에 추가하면 삽입 된 데이터 소품이 사라졌습니다. 따라서 데이터 객체에 데이터를 직접 삽입하십시오 : props.data. 하지만 지금 내가 구독하면 데이터에서 allLocations 속성을 잃어버린다. 어쩌면 업데이트 쿼리가 반환하는 것을 오해하고 있습니다. 데이터 개체를 제공 할 것이라고 가정하기 때문에. –

또한 하위 구성 요소에서 구독 쿼리를 호출하여 구독을 얻을 수 있었지만 많은 데이터 모델에서이 프로세스를 여러 번 반복 할 것이므로 코드를 재사용하지 않는 것이 좋다고 생각했습니다. 나는 당신의 충고를 받아 들여 질의를 분리하려고 노력할 것입니다. 나는 그것이 어떻게되는지 알려준다. 감사 –

감사합니다. @nburk에서 제안한대로 내 쿼리를 분할하여 작동하도록했습니다. 내 고차원 구성 요소를 작성하여 모듈 식으로 유지할 수있었습니다. 는 사람이 관심이 있다면 :

출처

2017-04-11 12:18:14

가입이 완료되면 왜 데이터가 사라지나요?

답변

관련 문제