This package includes GraphQL's configurations and utilities.
You can install the package via npm, yarn or pnpm:
npm install @baseapp-frontend/graphql
# or
yarn add @baseapp-frontend/graphql
# or
pnpm install @baseapp-frontend/graphqlIn order to use this package you will need to:
- create
relay.config.jsfile at the root level:
module.exports = require('@baseapp-frontend/graphql/relay.config.ts')- add relay compiler configuration under
next.config.js:const nextConfig = { // ... transpilePackages: [ // ... '@baseapp-frontend/graphql', // make sure to add this package under `transpilePackages` as well ], compiler: { relay: { src: "./", language: "typescript", artifactDirectory: "__generated__", }, }, }
In order to use common `Relay` features like `usePreloadedQuery` or `graphql` and to be able to create the generated files and download the graphql schema, you may need to install these additional dependencies (they're also present in the `@baseapp-frontend/graphql` dependencies, so make sure to install the same versions):
- install dependecies
```bash
yarn add react-relay@^16.1.0
yarn add -D relay-compiler@^16.1.0 @types/react-relay@^16.0.5
This wrapper leverages the RelayEnvironmentProvider from react-relay to supply a Relay environment throughout your application component tree.
It uses useEnvironment from config/environment for dynamic Relay environment configuration.
-
children(required): The child components that will receive access to the Relay environment.
To utilize RelayProvider, wrap your application or specific components where Relay functionality is needed.
-
RelayProviderusage example inside the root layout:import { RelayProvider } from '@baseapp-frontend/graphql'; const RootLayout: FC<PropsWithChildren> = ({ children }) => { return ( <html lang="en"> <body> <RelayProvider> {children} </RelayProvider> </body> </html> ) } export default RootLayout
withRelay is a higher-order component for components that uses GraphQL preloaded queries.
-
Component: React component. -
fallback(optional): A React element or string to display while the query is loading. Default to 'Loading...'. -
fetchPolicy(optional): Defines the query fetching policy. Default to 'store-or-network'.
-
withRelayusage example in a client component that receives a pre loaded query:'use client' import { FC } from 'react' import { ComponentWithQueryRef, withRelay } from '@baseapp-frontend/graphql' import { graphql, usePreloadedQuery } from 'react-relay' import ClientComponentTestQueryNode, { ClientComponentTestQuery, } from '__generated__/ClientComponentTestQuery.graphql' const ClientComponent: FC<ComponentWithQueryRef<ClientComponentTestQuery>> = ({ queryRef, }) => { const data = usePreloadedQuery( graphql` query ClientComponentTestQuery { user { id name bio } } `, queryRef, ) return <h1>{data.user?.bio}</h1> } export default withRelay< typeof ClientComponentTestQueryNode, ClientComponentTestQuery >(ClientComponent, { fallback: 'A different loading fallback', fetchPolicy: 'store-and-network' })
-
A parent component that pre loads a query and passes it over to the
ClientComponent:import { loadSerializableQuery } from '@baseapp-frontend/graphql' import ClientComponentTestQueryNode, { ClientComponentTestQuery, } from '__generated__/ClientComponentAboutArtistRegisterQuery.graphql' import ClientComponent from './ClientComponent' const ParentComponent = async () => { const preloadedQuery = await loadSerializableQuery< typeof ClientComponentTestQueryNode, ClientComponentTestQuery >(ClientComponentTestQueryNode.params, {}) return ( <div> <ClientComponent preloadedQuery={preloadedQuery} /> </div> ) } export default ParentComponent