如何使用中繼容器，react-router和GraphQL來獲取和顯示項目的id

我很難嘗試繞過中繼路由，反應路由器參數以及構建通常的查詢和容器！如何使用中繼容器，react-router和GraphQL來獲取和顯示項目的id

我想在用戶單擊FeatureList中的特定功能時編輯功能。它通過一個叫做「ID」參數是要素的Route.js

<Route path='/' component={AppComponent} queries={ViewerQuery}> 
    <IndexRoute component={FeaturesContainer} queries={ViewerQuery} /> 
    <Route path='/feature' component={FeatureComponent} queries={ViewerQuery} /> 
    <Route path="/feature/edit/:id" component={FeatureEditComponent} queries={FeatureQuery}/> 
    <Redirect from='*' to='/' /> 
    </Route>

的ID在我FeatureQuery文件我有以下查詢：

export default { 
    viewer: (Component) => Relay.QL` 
    query { 
     viewer { 
     ${Component.getFragment('viewer')} 
     } 
    } 
    ` 
};

在這一點上，我完全被卡住。如何擴展這個以包含「id」並使用「id」查詢功能？相關的中繼容器片段會被塑造成什麼樣的形狀？我只看到一個級別的例子。

我試過，但我知道這是不對的：

export default { 
    feature: (Component) => Relay.QL` 
     query { 
      viewer { 
       features(id:$id) { 
        ${Component.getFragment('feature')} 
       } 
      } 
     } 
    ` 
};

這是獲取功能的列表電流繼電器容器，怎麼會變成這樣進行修改，僅僅通過ID返回1個功能？：

export default Relay.createContainer(CreativeEditComponent, { 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on User { 
     id, 
     features(first: 20) { 
      edges { 
      node { 
       id 
       name 
       description 

      } 
      } 
     } 
     }` 
    } 
});

我在GraphiQL測試查詢和它按預期工作：

query { 
    viewer { 
    features(id:"1") { 
     edges { 
     node { 
      id 
      name 
      description 
     } 
     } 
    } 
    } 
}

結果：

{ 
    "data": { 
    "viewer": { 
     "features": { 
     "edges": [ 
      { 
      "node": { 
       "id": "Q3JlYXRpdmU6MQ==", 
       "name": "React", 
       "description": "A JavaScript library for building user interfaces." 
      } 
      } 
     ] 
     } 
    } 
    } 
}

schema.js：

const userType = new GraphQLObjectType({ 
    name: 'User', 
    description: 'A person who uses our app', 
    fields:() => ({ 
    id: globalIdField('User'), 

    features: { 
     type: featureConnection, 
     description: 'Features that I have', 
     //args: connectionArgs, 

     args: { 
     id: { 
      type: GraphQLString, 
     }, 
     after: { 
      type: GraphQLString, 
     }, 
     first: { 
      type: GraphQLInt, 
     }, 
     before: { 
      type: GraphQLString, 
     }, 
     last: { 
      type: GraphQLInt, 
     }, 
     }, 

     resolve: (_, args) => { 
     return resolveGetFeatures(args) 
     }, 
    }, 


    }), 
    interfaces: [nodeInterface] 
}); 



const featureType = new GraphQLObjectType({ 
    name: 'Feature', 
    description: 'Feature integrated in our starter kit', 
    fields:() => ({ 
    id: globalIdField('Feature'), 
    name: { 
     type: GraphQLString, 
     description: 'Name of the feature' 
    }, 
    description: { 
     type: GraphQLString, 
     description: 'Description of the feature' 
    } 
    }), 
    interfaces: [nodeInterface] 
});

來源

2016-09-15 BennyTicklez

您需要將路由器變量傳遞給你的片段。

const ViewerQuery = { 
    viewer: (Component, vars) => Relay.QL` 
    query { 
     viewer { 
     ${Component.getFragment('viewer', vars)} # <-- this 
     } 
    } 
    ` 
}

我複製從這裏這段代碼的細節：https://github.com/relay-tools/react-router-relay/issues/92#issuecomment-235641397

然後你可以使用id變量在你的組件，但你需要爲ID的初始值：

export default Relay.createContainer(CreativeEditComponent, { 
    initialVariables: { 
    id: '' 
    }, 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on User { 
      id, 
      feature(id:$id) { 
      id 
      name 
      description 
      } 
     }` 
    } 
});

而且在架構.js爲您的用戶類型定義一個字段，該字段僅提供一項功能：

const userType = new GraphQLObjectType({ 
    name: 'User', 
    description: 'A person who uses our app', 
    fields:() => ({ 
    id: globalIdField('User'), 
    feature: { 
     type: featureType, 
     description: 'feature', 
     args: { 
     id: { 
      type: GraphQLString, 
      description: 'The id of the feature' 
     } 
     }, 
     resolve: (_, args) => resolveGetFeature (args), 
    }, 
    ...

來源

2016-11-21 04:14:56

如何使用中繼容器，react-router和GraphQL來獲取和顯示項目的id

回答

相關問題