Как получить и отобразить элемент по идентификатору с использованием контейнера реле, реактора-ответчика и GraphQL

Question

Мне очень тяжело пытаться разгадать маршруты ретрансляции, параметры реакции-маршрутизатора и создавать запросы и контейнеры в целом!

Я хочу отредактировать функцию, когда пользователь нажимает на определенную функцию в FeatureList. Он проходит под названием параметров «Идентификатор», который является идентификатор признака в 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> 

В моем файле 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')} 
       } 
      } 
     } 
    ` 
}; 

Это ток реле контейнер, который получает список возможностей, как бы это быть изменен, чтобы просто вернуть 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] 
}); 

Answer 1

Вам нужно передать переменные маршрутизатора в ваш фрагмент.

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:

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), 
    }, 
    ...