如何使用 Relay 容器、react-router 和 GraphQL 通过 id 获取和显示项目 [英] How to fetch and display item by id using Relay container, react-router and GraphQL

问题描述

我真的很难理解中继路由、react-router 参数以及构建查询和容器的一般情况！

I am having a really hard time trying to get my head around Relay routes, react-router params and building the queries and containers in general!

我想在用户单击 FeatureList 中的特定功能时编辑功能.它传递一个名为id"的参数，它是 Route.js 中 Feature 的 id

I want to edit a Feature when the user clicks on a specific Feature in a FeatureList. It passes a param called "id" which is the id of the Feature in 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 文件中，我有以下查询:

In my FeatureQuery file I have the following query:

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

此时我完全卡住了.如何扩展它以包含id"并使用id"查询功能?相关的中继容器片段的形状是什么?我只看到深入一层的例子.

At this point I am completely stuck. How do I expand this to include the "id" and query the features using the "id"? And what would the relating relay container fragment be shaped like? I only see examples going one level deep.

我试过了，但我知道这是不对的:

I tried this but I know it isn't right:

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

这是获取功能列表的当前中继容器，如何将其修改为仅通过 id 返回 1 功能?:

This is the current relay container that gets a list of the Features, how would this be modified to just return the 1 feature by id? :

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

            }
          }
        }
      }`
  }
});

我在 GraphiQL 中测试了一个查询，它按预期工作:

I have tested a query in GraphiQL and it works as expected:

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]
});

推荐答案

您需要将路由器变量传递给您的片段.

You need to pass the router variables to your fragment.

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

I copied this code detail from here: https://github.com/relay-tools/react-router-relay/issues/92#issuecomment-235641397

然后你就可以在你的组件中使用 id 变量了，但是你需要一个 id 的初始值:

Then you can use the id variable in your component, but you need an initial value for id:

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

并在 schema.js 中为您的用户类型定义一个字段，该字段仅提供一个功能:

And in schema.js define a field for your user type, that serves only one feature:

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

这篇关于如何使用 Relay 容器、react-router 和 GraphQL 通过 id 获取和显示项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！