In other words, the data obtained as a result of reading a fragment via useFragment also serves as the fragment reference for any child fragments included in that fragment.įragments in Relay allow declaring data dependencies for a component, but they can't be fetched by themselves. UsernameSection_user will be the fragment reference that UsernameSection expects. In our particular example, that means the result of reading a fragment that includes. UsernameSection) expects is the result of reading a parent fragment that includes the child fragment. The fragment reference that the child (i.e.This allows us to reason locally about our components and modify them without worrying about affecting other components.If this wasn't the case, modifying a component could break other components! This prevents separate components from even accidentally having implicit dependencies on each other.Likewise, child components will not receive the data selected by their parents (again, unless the child selected those same fields). This means that the parent component will not receive the data selected by a child component (unless that parent explicitly selected the same fields).the fragment reference, doesn't actually contain any of the data declared by the child UsernameSection component instead, UsernameSection will use the fragment reference to read the data it declared internally, using useFragment. Note that in this case the user passed to UsernameSection, i.e.In other words, a fragment reference is like a pointer to a specific instance of a type that we want to read data from. As we've mentioned before, a fragment reference is an object that Relay uses to read the data declared in the fragment definition as you can see, the child UsernameSection_user fragment itself just declares fields on the User type, but we need to know which specific user to read those fields from this is what the fragment reference corresponds to. UsernameSection expects a fragment reference as the user prop.UserComponent both renders UsernameSection, and includes the fragment declared by UsernameSection inside its own graphql fragment declaration.If you need to render data from multiple fragments inside the same component, you can use useFragment multiple times: This makes it easy to identify which fragments are defined in which modules and avoids name collisions when multiple fragments are defined in the same module. In order to easily achieve this, we name fragments using the following convention based on the module name followed by an identifier: _. Fragment names need to be globally unique.In our example, we're typing the user prop as the fragment reference we need for useFragment, which corresponds to the UserComponent_user$key imported from UserComponent_aphql, which means that the type of data above would be.By using a properly typed fragment reference as input, the type of the returned data will automatically be Flow-typed without requiring an explicit annotation. We use our lint rule to enforce that the type of the fragment reference prop is correctly declared when using useFragment.The generated Flow types include a type for the fragment reference, which is the type with the $key suffix: $key, and a type for the shape of the data, which is the type with the $data suffix: $data these types are available to import from files that are generated with the following name.Relay will automatically generate Flow types for any declared fragments when the compiler is run, so you can use these types to declare the type for your Component's props.via fetching new data, or mutating existing data), the component will automatically re-render with the latest updated data.
Note that the component is automatically subscribed to updates to the fragment data: if the data for this particular User is updated anywhere in the app (e.g.A fragment reference is an object that Relay uses to read the data declared in the fragment definition as you can see, the UserComponent_user fragment itself just declares fields on the User type, but we need to know which specific user to read those fields from this is what the fragment reference corresponds to.This is similar to usePreloadedQuery, which takes a query definition and a query reference.useFragment takes a fragment definition and a fragment reference, and returns the corresponding data for that fragment and reference.
0 kommentar(er)
