https://facebook.com/groups/graphql-kr logo
#클럽-프론트엔드
Title
# 클럽-프론트엔드
u

undefined

06/23/2021, 10:10 AM
Copy code
interface PageInfo {
  hasNextPage: boolean;
  endCursor: string;
}

interface Connection<Edge> {
  pageInfo: PageInfo;
  edges: Edge[];
}

interface Response<Node> {
  hasNextPage: boolean;
  endCursor: string;
  nodes: Node[];
}

const extractConnectionInfo = <Edge extends { node?: Node }>({ edges, pageInfo }: Connection<Edge>): Response<Node>  => {
   ...parsing work
}
여기서
extractConnectionInfo
nodes
를 가지고 오려고 하는데 저 함수가 매개변수만으로
node
타입을 추론하는 방법이 있나요?
Copy code
// type of nodes is "unknown[]"
const { nodes } = extractConnectionInfo({ edges, pageInfo });
지금 저대로 사용하면
unknown[]
인데 여기서 실제 노드 타입을 사용하고 싶습니다.
h

Hyeseong Kim

06/23/2021, 10:14 AM
맥락을 다 넣어주면 되어요
u

undefined

06/23/2021, 10:16 AM
어떤 맥락이요?
h

Hyeseong Kim

06/23/2021, 10:20 AM
Copy code
type Node = {
  id: string,
};

type Edge<NodeType extends Node> = {
  node: NodeType,
};

type Connection<NodeType extends Node, EdgeType extends Edge<NodeType> = Edge<NodeType>> = {
  edges: EdgeType[],
  pageInfo: PageInfo,
};

type NodeTypeFromConnection<ConnectionType> = ConnectionType extends Connection<infer NodeType> ? NodeType : never;

function extractConnectionInfo<ConnectionType extends Connection<unknown>>(connection: ConnectionType): { nodes: Array<NodeTypeFromConnection<ConnectionType>> } {
  ...
}
u

undefined

06/23/2021, 10:22 AM
오 감사합니다 한번 해보겠습니다!
h

Hyeseong Kim

06/23/2021, 10:23 AM
타입스크립트 질문은 재현되는 예제를 TypeScript Playground 에 같이 올려주시면 좋아요
👍 2
u

undefined

06/24/2021, 1:23 AM
이거 해봤는데
Connection<unknown>
에서 에러가 나네여 ㅠ
Node 의 제약조건을 충족하지 않는다고 하네요
https://www.typescriptlang.org/play?target=99#code/C4TwDgpgBAcgrgGwQQwEYIgHgCoD4oC8U2UAPlAHaIJl[…]gwHcgKxWl0UrWJXxWicKsOQksewOat9+q5XMTSdNeKWhp4JaAA 이렇게 하면 되긴 하는데
node
undefined
도 포함해서 함수 사용하는 입장에선
undefined
를 필터링해줘야 하네요. 리턴값
node
undefined
포함 안하게 하는 방법이 있을까여
h

Hyeseong Kim

06/24/2021, 1:39 AM
엣지가 왜 nullable 이여야해요?
Node 의 제약조건을 충족하지 않는다고 하네요
그럼 Node 를 넣으면 되죠
u

undefined

06/24/2021, 1:39 AM
엣지가 왜 nullable 이여야해요?
실제로 nullable 이에여
그럼 Node 를 넣으면 되죠
이게 어떤 말씀이신가요? 노드의 타입은 엣지를 받아서 추론하는건데
h

Hyeseong Kim

06/24/2021, 1:42 AM
실제로 nullable 이면 필터하는건 당연한거 아닌가요
뭘 하고 싶으신건지 잘 모르겠어요
u

undefined

06/24/2021, 1:43 AM
그래서 저 필터링을 첨부한 playground에서
flatMap
으로 해주고 있습니다
Copy code
const nodes = edges?.flatMap((edge) => edge?.node ?? []) ?? [];
pageInfo
edges
를 받아서
hasNextPage
,
endCursor
,
nodes
를 가져오는 건데
edges
안에 들어있는 노드의 타입을 추론하려는거에여
h

Hyeseong Kim

06/24/2021, 2:00 AM
그럼 답은 이미 위에 적어드렸는데요
잘됩니다
u

undefined

06/24/2021, 2:02 AM
노드 인터페이스는 왜 있는건가요?
h

Hyeseong Kim

06/24/2021, 2:02 AM
범위 좁히려고요
없어도 되는데 있는게 나아요
__typename 이랑
u

undefined

06/24/2021, 2:14 AM
실제
node
값에는
id
말고 다른 값들도 있어서 저렇게는 추론이 안되더라고여 그래서
type Node = unknown
으로 재정의하니 되네요. 감사합니다. 🙇‍♂️
h

Hyeseong Kim

06/24/2021, 2:45 AM
다른값있어도 돼요 여기서는 unknown 이랑 역할이 동일해요