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

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

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

В моем файле 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."
            }
          }
        ]
      }
    }
  }
}

схема.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]
});