{"library":"react-relay","title":"React Relay","description":"React Relay is a JavaScript framework developed by Meta for building highly performant and data-driven React applications using GraphQL. It provides a robust client-side data store, automatic query batching, optimistic updates, and a compile-time artifact generation process that ensures type safety and optimized network requests. Currently at version 20.1.1, Relay maintains an active development pace with frequent patch and minor releases, alongside major releases introducing significant features and breaking changes on a regular cadence. Key differentiators include its tight integration with GraphQL at a compiler level, enabling advanced optimizations like persisted queries and fragment colocation, and its comprehensive approach to client-side data management, including client-side state through Relay Resolvers. Its compiler tooling is a core component, transforming GraphQL declarations into optimized, type-safe code.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-relay"],"cli":{"name":"relay","version":null}},"imports":["import { RelayEnvironmentProvider } from 'react-relay'","import { useLazyLoadQuery } from 'react-relay'","import { useFragment } from 'react-relay'","import { graphql } from 'react-relay'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { \n  RelayEnvironmentProvider, \n  loadQuery, \n  useLazyLoadQuery, \n  graphql \n} from 'react-relay';\nimport { \n  Environment, \n  Network, \n  RecordSource, \n  Store \n} from 'relay-runtime';\n\n// 1. Define a Network Layer\nconst fetchGraphQL = async (text, variables) => {\n  const response = await fetch('https://swapi-graphql.netlify.app/.netlify/functions/index', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query: text, variables }),\n  });\n  return await response.json();\n};\n\nconst network = Network.create(fetchGraphQL);\n\n// 2. Create a Relay Store\nconst store = new Store(new RecordSource());\n\n// 3. Create a Relay Environment\nconst environment = new Environment({\n  network,\n  store,\n});\n\n// 4. Define a Query\nconst AppQuery = graphql`\n  query AppQuery {\n    allFilms {\n      films {\n        title\n        releaseDate\n      }\n    }\n  }\n`;\n\n// 5. Pre-load the query for suspense (optional, but good practice)\nconst preloadedQuery = loadQuery(environment, AppQuery, {});\n\nfunction FilmList() {\n  const data = useLazyLoadQuery(AppQuery, {}, { fetchPolicy: 'store-or-network' });\n\n  return (\n    <div>\n      <h1>Star Wars Films</h1>\n      <ul>\n        {data.allFilms?.films?.map((film, index) => (\n          <li key={index}>{film?.title} (Released: {film?.releaseDate})</li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nexport default function AppRoot() {\n  return (\n    <RelayEnvironmentProvider environment={environment}>\n      <React.Suspense fallback={<div>Loading...</div>}>\n        <FilmList />\n      </React.Suspense>\n    </RelayEnvironmentProvider>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates setting up a basic Relay Environment, defining a GraphQL query, and using `useLazyLoadQuery` within a React component to fetch and display data, including Suspense for loading states. It connects to a public Star Wars API.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}