
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
apollo-fragment-react-codegen
Advanced tools
A plugin for graphql-code-generator that allows to generate React hooks based on fragment definitions
This package contains a plugin for GraphQL Code Generator
that allows to generate React hooks with corresponding TypeScript types
based on useApolloFragment
from apollo-fragment-react
and GraphQL fragments defined in your app.
This package requires TypeScript React Apollo plugin to be installed and setup to generate fragment documents and types.
First, install the package:
yarn add -D apollo-fragment-react-codegen
Then register the plugin in GraphQL Code Generator config (codegen.yml
by default):
generates:
path/to/file.ts:
plugins:
- typescript
- typescript-operations
- typescript-react-apollo
- apollo-fragment-react-codegen
config:
withHooks: true
Now, whenever you run your codegen script, it will also generate React hooks based on existing fragment definitions
which you then can use in your code instead of useApolloFragment
.
Suppose you have some existing code to read user name and avatar from Apollo Client cache using useApolloFragment
:
// UserAvatar.tsx
import gql from 'graphql-tag'
import { useApolloFragment } from 'apollo-fragment-react'
import { User } from 'src/generated.ts'
const userAvatarAndNameFragment = gql`
fragment userAvatarAndNameFragment on User {
name
avatarUrl
}
`
type FragmentData = Pick<User, 'name' | 'avatarUrl'>
export function UserAvatar(userId: string) {
const { data: userData } = useApolloFragment<FragmentData>(userId)
if (!userData) {
return null
}
return <img src={userData.avatarUrl} alt={`${userData.name} avatar`} />
}
To leverage GraphQL codegen, let's move the fragment definiton into a .graphql
file:
# fragments.graphql
fragment userAvatarAndName on User {
name
avatarUrl
}
and make sure that we include this file in the codegen configuration:
documents:
- "src/**/*.graphql"
# OR
# - "src/**/fragments.graphql"
Now, when we run the codegen script, the generated file should also include something like this:
export function useUserAvatarAndNameFragment(id: string) {
return useApolloFragment<UserAvatarAndNameFragment>(
UserAvatarAndNameFragmentDoc,
id
)
}
export type UserAvatarAndNameFragmentHookResult = ReturnType<
typeof useUserAvatarAndNameFragment
>
Next we can update our UserAvatar
component:
// UserAvatar.tsx
import { useUserAvatarAndNameFragment } from 'src/generated.ts'
export function UserAvatar(userId: string) {
const { data: userData } = useUserAvatarAndNameFragment(userId)
if (!userData) {
return null
}
return <img src={userData.avatarUrl} alt={`${userData.name} avatar`} />
}
useUserAvatarAndNameFragment
is just a wrapper around useApolloFragment
which reduce the amount of boilerplate and also properly types the return value.
FAQs
A plugin for graphql-code-generator that allows to generate React hooks based on fragment definitions
The npm package apollo-fragment-react-codegen receives a total of 3 weekly downloads. As such, apollo-fragment-react-codegen popularity was classified as not popular.
We found that apollo-fragment-react-codegen demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.