graphql template tag provided by Relay serves as the mechanism to write queries, fragments, mutations and subscriptions in the GraphQL language. For example:
The result of using the
graphql template tag is a
GraphQLTaggedNode; a runtime representation of the GraphQL document.
graphql template tags are never executed at runtime. Instead, they are compiled ahead of time by the Relay compiler into generated artifacts that live alongside your source code, and which Relay requires to operate at runtime.
Relay uses the Relay Compiler to convert
graphql literals into generated files that live alongside your source files.
A fragment like the following:
Will cause a generated file to appear in
with both runtime artifacts (which help to read and write from the Relay Store)
and Flow types to help you write type-safe code.
The Relay Compiler is responsible for generating code as part of a build step which can then be referenced at runtime. By building the query ahead of time, the Relay's runtime is not responsible for generating a query string, and various optimizations can be performed on the query that could be too expensive at runtime (for example, fields that are duplicated in the query can be merged during the build step, to improve efficiency of processing the GraphQL response).
To use the Relay Compiler, you need either a
.json GraphQL Schema file, describing your GraphQL server's API. Typically these files are local representations of a server source of truth and are not edited directly. For example, we might have a
Additionally, you need a directory containing
.js files that use the
graphql tag to describe GraphQL queries and fragments. Let's call this
yarn run relay as set up before.
This will create a series of
__generated__ directories that are co-located with the corresponding files containing
For example, given the two files:
This would produce three generated files, and two
Typically you will not need to import your generated definitions. The Relay Babel plugin will then convert the
graphql literals in your code into
require() calls for the generated files.
More rarely, you may need to access a query, mutation, fragment or subscription from multiple files. In these cases, you can also import it directly:
Is this page useful?