Skip to content

Instantly share code, notes, and snippets.

@Beingbook
Last active Jun 29, 2022
Embed
What would you like to do?
Relay Resolver + TypeScript 쓰는 법

Relay Resolvers are still considered experimental. To use them you must ensure that the ENABLE_RELAY_RESOLVERS runtime feature flag is enabled, and that the enable_relay_resolver_transform feature flag is enabled in your project’s Relay config file.

라고 주장하고 아직 @types/relay-runtime에 타입이 반영 안 돼있기 때문에, 지금 사용하려면 relay-compiler 설정 + relay-runtime 런타임 설정 + relay-runtime 타입 확장을 해야 원활합니다.

// relay.config.js 또는 package.json 파일의 'relay' 컴파일러 설정
module.exports = {
  src: "./",
  artifactDirectory: "...",
  language: "typescript",
  featureFlags: {
    // 아래 옵션을 활성화해줘야 합니다.
    enable_relay_resolver_transform: true,
    enable_client_edges: { kind: "enabled" },
  },
};

caveat

생성된 Relay artifacts가 module resolution이 제대로 안되어서 타입추론이 제대로 안되는 문제가 있습니다.

module "relay-runtime" {
import { useFragment } from "react-relay";
import { RelayFeatureFlags as StableRelayFeatureFlags } from "relay-runtime/index";
export * from "relay-runtime/index";
export const __internal: {
ResolverFragments: {
// not perfectly compatible, i'll correct this if needed...
readFragment: typeof useFragment;
};
};
type ExperimentalRelayFeatureFlags = typeof StableRelayFeatureFlags & {
ENABLE_RELAY_RESOLVERS: boolean;
};
export const RelayFeatureFlags: ExperimentalRelayFeatureFlags;
}
import * as RelayRuntime from "relay-runtime";
RelayRuntime.RelayFeatureFlags.ENABLE_RELAY_RESOLVERS = true;
export const readFragment =
RelayRuntime.__internal.ResolverFragments.readFragment;
import { graphql, RelayFeatureFlags } from "relay-runtime";
import { readFragment } from "./relay";
import { UserFullNameResolver$key } from "../relay-artifacts/UserFullNameResolver.graphql";
/**
* @RelayResolver
*
* @onType User
* @fieldName fullName
* @rootFragment UserFullNameResolver
*
* user full name
*/
export default function UserFullNameResolver(user$key: UserFullNameResolver$key): string {
const user = readFragment(
graphql`
fragment UserFullNameResolver on User {
firstName
lastName
}
`,
user$key
);
return `${user.firstName} ${user.lastName}`;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment