createRegistration
or createDependency
functions. It allows you to define the GraphQL fragment, zod schema and any dependencies it requires.
createRegistration
and createDependency
?createRegistration
requires your schema to include a __typename
field.
__typename
- this is the GraphQL type name. GraphQL endpoints usually provide a explorer, which will show you the type name.fragmentName
- (optional) by default Fragment
will be appended to the __typename
. However, you can override this if required, a few examples of when it is needed will be listed below.fragment
- this is the GraphQL fragment, but only the “body” of the fragment. You don’t have to include the fragment on ...
portion of the fragment.schema
- this is the zod schema that will be used to validate the incoming data. Here you can perform any transformations. Remember zod
transforms can be async
so if you needed to fetch anything based on validated data, you can do that here.dependencies
- (optional) this is an array of other pigeon fragments that your fragment depends on. We’ll use this to collect all the fragments required for a query, ensuring on what you need is included and de-duped.title
, description
and image
.
image
will be a consistent shape and something we’ll reuse across the application. So we’ll define a createDependency
for the image
fragment.
__typename
for all asset data. So we’ve defined the __typename
as Asset
. We’ve also defined a fragmentName
as ImageFragment
as we might define another fragment for videos, not specifying a fragmentName
would cause a conflict.
fragmentName
manually to avoid conflicts.transform
method to merge the size
object into the parent object. This is a simple example of how you can transform data.
createRegistration
, when to use createRegistration
and createDependency
really just depends if you need to include a __typename
in your schema. For example, if you are pulling in a list of components and need to render components based on the __typename
you would use createRegistration
.
We are also using the ImageFragment
we defined earlier as a dependency.
fragment
we are using the ...${ImageFragment.fragmentName}
syntax. In our case, this will turn into ...ImageFragment
.schema
we are using the ImageFragment.schema
to validate & transform the image
field data.dependencies
we are including the ImageFragment
so that when we collect all the fragments required for a query, we include the ImageFragment
.fragmentName
within the fragment
field, using ImageFragment.fragment
will inject the actual fragment into the query, and can cause a error about defining a fragment but not using it.transform
method to transform the data into what your UI component needs. This avoids needing to change the UI component and/or requiring the frontend to add transformation logic to components.