2016-09-27 43 views
2

我學習繼電器,我懂了工作,但有時感覺就像是一個偶然的機會:)繼電器抱怨片段變量,但沒有碎片的有變數

對不起,如果我讓初學者在這裏犯錯誤,我已經閱讀了手冊和所有例子,但我似乎無法將我的頭圍繞在一起。

無論如何,我現在有以下問題。

我的模式是這樣的:

​​

所有的數據都在{}觀衆,這需要認證的保健訪問。演員領域只是其中之一。

Actor是UserType的一個實例,當前登錄的用戶。

我想要一個理智的組件層次結構,其中頂層組件僅獲取用戶作爲道具(併爲其所需屬性提供片段)。但接力賽表示,我做得不對,我不確定我做錯了什麼。

我的代碼如下所示(相當混亂的時刻,因爲我測試的東西出來):

class UserRegistrationPage extends React.Component { 

    render() { 
     const user = this.props.user; 
     return (
      <View> 
       <Text>Email: {user.email}</Text> 
      </View> 
     ); 
    } 

    submit(model) { 
     const user = this.props.user; 

     this.props.relay.commitUpdate(
      new UpdateUserMutation({ 
       id: user.id, 
       ...model 
      }, { 
       onSuccess: response => { 
        console.log("SUCCESS!"); 
        console.log(response); 
       }, 
       onFailure:() => { 
        console.log("FAIL!"); 
       } 
      })); 
    } 

} 

UserRegistrationPage = Relay.createContainer(UserRegistrationPage, { 
    fragments: { 
     user:() => Relay.QL` 
      fragment on User { 
       email 
      } 
     `, 
    }, 
}); 

////////////////////////////// 

class UserRegistrationViewer extends React.Component { 

    render() { 
     return <UserRegistrationPage user={this.props.actor} /> 
    } 

} 

UserRegistrationViewer = Relay.createContainer(UserRegistrationViewer, { 
    fragments: { 
     actor:() => Relay.QL` 
      fragment on Viewer { 
       actor { 
        ${UserRegistrationPage.getFragment('user')}, 
       } 
      } 
     `, 
    }, 
}); 

///////////////////////////////// 

class QueryConfig extends Relay.Route { 
    static routeName = 'UserRegistrationRoute'; 
    static prepareParams = routeConfigParamsBuilder; 
    static queries = { 
     actor: (Component) => 
      Relay.QL` 
        query { 
         viewer(token:$token) { 
          ${Component.getFragment('actor')}, 
         } 
        } 
     `, 
    }; 
} 

export const UserRegistrationPageComponent = (parentProps) => { 
    return (
     <Relay.Renderer 
      environment={Relay.Store} 
      Container={UserRegistrationViewer} 
      queryConfig={new QueryConfig()} 
      render={({done, error, props, retry, stale}) => { 
     if (error) { 
      return <View><Text>Error!</Text></View>; 
     } else if (props) { 
      return <UserRegistrationViewer {...parentProps} {...props} />; 
     } else { 
      return <View><Text>Loading...</Text></View>; 
     } 
     }} 
     /> 
    ) 
}; 

而且我發現了以下錯誤。

警告:RelayContainer:組分UserRegistrationPage被渲染 與從用於獲取片段 user變量不同的變量。用變量(not fetched)獲取片段,但用變量{}呈現 。這可以表示兩個 可能性中的一個: - 父級在查詢中設置了正確的變量 - UserRegistrationPage.getFragment('user', {...}) - 但在渲染組件時未傳遞 相同的變量。請務必通過 <UserRegistrationPage ... />告訴 組件使用哪些變量。 - 您有意將虛假數據傳遞給此組件,在這種情況下請忽略此警告。

所以我有幾個問題。

1)爲什麼我得到那個錯誤,我該如何解決? 我不明白爲什麼它會抱怨片段變量時,沒有任何片段有任何變量。

2)如何使UserRegistrationPage獲取this.props.user? 我應該製作一個映射查詢響應的組件樹層次結構嗎? 在某些時候,我有this.props.actor.user,但我不想讓組件知道查詢響應結構,只知道它感興趣的對象。

3)名稱是查詢以某種方式與片段的名稱結合在一起?

任何幫助,來改進,提示和答案的建議是非常值得歡迎的,我開始砰我的頭靠在這裏的牆壁:)

回答

5

我終於明白,以前躲避我的幾個細節。 我會在這裏發佈它們,以防止其他人與繼電器陷入困境。

class QueryConfig extends Relay.Route { 
    static routeName = 'UserRegistrationRoute'; 
    static prepareParams = routeConfigParamsBuilder; 
    static queries = { 
     actor: (Component) => 
      Relay.QL` 
        query { 
         viewer(token:$token) { 
          ${Component.getFragment('actor')}, 
         } 
        } 
     `, 
    }; 
} 

此處的查詢在命名爲「actor」時誤導,因爲它不返回actor。它返回查看器查詢的根目錄。 另外,包含的片段是供觀衆使用的,而不是演員。

讓我們來更新它。

class QueryConfig extends Relay.Route { 
    static routeName = 'UserRegistrationRoute'; 
    static prepareParams = routeConfigParamsBuilder; 
    static queries = { 
     viewer: (Component) => 
      Relay.QL` 
        query { 
         viewer(token:$token) { 
          ${Component.getFragment('viewer')}, 
         } 
        } 
     `, 
    }; 
} 

完成。讓我們看看第一個容器有什麼問題。

UserRegistrationViewer = Relay.createContainer(UserRegistrationViewer, { 
    fragments: { 
     actor:() => Relay.QL` 
      fragment on Viewer { 
       actor { 
        ${UserRegistrationPage.getFragment('user')}, 
       } 
      } 
     `, 
    }, 
}); 

同樣的事情在這裏,名稱是誤導。這個容器不會將actor提供給組件,它會爲查看器提供內容。

讓我們來更新它。

UserRegistrationViewer = Relay.createContainer(UserRegistrationViewer, { 
    fragments: { 
     viewer:() => Relay.QL` 
      fragment on Viewer { 
       actor { 
        ${UserRegistrationPage.getFragment('user')}, 
       } 
      } 
     `, 
    }, 
}); 

因此,這裏只改變了片段的名稱。

現在,UserRegistrationViewer組件獲取類型爲ViewerType的道具「查看器」(由片段指定)。我們知道查看器包含「演員」,這是UserType的一個實例。 UserRegistrationPage需要一個屬於UserType的道具「用戶」,如其片段所指定的那樣。

因此讓我們更新組件。

class UserRegistrationViewer extends React.Component { 

    render() { 
     return <UserRegistrationPage user={this.props.viewer.actor} /> 
    } 

} 

現在我們有了一個不知道查詢響應層次結構的UI組件,而且一切正常!

我仍然不知道是什麼原因我得到的錯誤雖然:)

希望這可以幫助別人!