Routes #Facebook Relay文档翻译#

原文地址：Routes
上一篇 Containers
Relay文档翻译目录

Routes are responsible for defining the entry points into a Relay application. But in order to understand why routes are necessary, we must first understand the difference between GraphQL queries and fragments.
Routes负责定义Relay应用的入口。为了说明routes存在的必要性，我们必须明白GraphQL query和fragment之间的区别。

Note

Relay routes don’t really implement any URL routing specific logic or work with History API. In the future we will maybe rename RelayRoute to be something more like RelayQueryRoots or RelayQueryConfig.

Relay routes 并不是URL路由逻辑或者使用了History API。名字可能给大家造成误解，将来也许会改叫RelayQueryRoots或RelayQueryConfig之类的。

Queries vs. Fragments

In GraphQL, queries declare fields that exist on the root query type. For example, the following query might fetch the name of the user with an id of 123:
在GraphQL，queries用来为root query type上存在的fields做声明。举例来说，下面的query可以获取id为123的user的名字。

query UserQuery {
  user(id: "123") {
    name,
  },
}

On the other hand, GraphQL fragments declare fields that exist on any arbitrary type. For example, the following fragment fetches the profile picture URI for some User.
另一边，GraphQL fragments可以为任意类型上的field做声明。例如，下面的fragment可以获取user类型的照片URI。

fragment UserProfilePhoto on User {
  profilePhoto(size: $size) {
    uri,
  },
}

Fragments can be embedded within other fragments or queries. For example, the above fragment could be used to fetch user 123’s profile photo:
Fragments可以被嵌入到其他fragments或queries中。例如，上面的fragment可以被用来获取id为123的用户照片。

query UserQuery {
  user(id: "123") {
    ...UserProfilePhoto,
  },
}

However, the fragment could also fetch each of user 123’s friends’ profile photos:
而且，该fragment还可以获取用户123的每个朋友的照片。

query UserQuery {
  user(id: "123") {
    friends(first: 10) {
      edges {
        node {
          ...UserProfilePhoto,
        },
      },
    },
  },
}

Since Relay containers define fragments and not queries, they can be easily embedded in multiple contexts. Like React components, Relay containers are highly reusable.
因为在Relay container中定义的是fragment不是query，他们可以轻松的嵌套使用。像React component一样，Relay container可复用性很强。

Routes and Queries

Routes are objects that define a set of root queries and input parameters. Here is a simple route that might be used to render user 123’s profile:
Routes是可用来定义一组root queries和输入参数的对象。下例中是一个简单的route用于渲染user 123的简介。

var profileRoute = {
  queries: {
    // Routes declare queries using functions that return a query root. Relay
    // will automatically compose the `user` fragment from the Relay container
    // paired with this route on a Relay.RootContainer
    user: () => Relay.QL`
      # In Relay, the GraphQL query name can be optionally omitted.
      query { user(id: $userID) }
    `,
  },
  params: {
    // This `userID` parameter will populate the `$userID` variable above.
    userID: '123',
  },
  // Routes must also define a string name.必须起名字
  name: 'ProfileRoute',
};

If we wanted to create an instance of this route for arbitrary users, we can subclass the Relay.Route abstract class. Relay.Route makes it easy to define a set of queries and required parameters to be re-used multiple times:
如果我们允许任意用户给该route创建实例，我们可以继承Relay.Route。它使得我们可以轻松的定义一组query及所需参数，以后也便于复用。

class ProfileRoute extends Relay.Route {
  static queries = {
    user: () => Relay.QL`
      query { user(id: $userID) }
    `,
  };
  static paramDefinitions = {
    // By setting `required` to true, `ProfileRoute` will throw if a `userID`
    // is not supplied when instantiated.
    userID: {required: true},
  };
  static routeName = 'ProfileRoute';
}

Now we can instantiate a ProfileRoute that fetches data for user 123:
好了，现在我们有了一个ProfileRoute的实例，用于获取用户123的数据。

// Equivalent to the object literal we created above.
var profileRoute = new ProfileRoute({userID: '123'});

But now, we can also create routes for arbitrary user IDs. For example, if we wanted to construct a route that fetched data for a user defined by the userID query parameter, we might use:
现在，我们还可以给任意的user IDs创建route。例如，我们想创建一个route，用来给可接收userID为参数的user获取数据。

window.addEventListener('popstate', () => {
  var userID = getQueryParamFromURI('userID', document.location.href);
  var profileRoute = new ProfileRoute({userID: userID});
  React.render(
    <Relay.RootContainer
      Component={UserProfile}
      route={profileRoute}
    />,
    container
  );
});