agsoli.blogg.se - React fragment

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.

In other words, a fragment reference is like a pointer to a specific instance of a type that we want to read data from.

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.