Showing
1 changed file
with
66 additions
and
0 deletions
... | @@ -67,3 +67,69 @@ React Hook 을 사용할 때는 몇가지 규칙이 있다. | ... | @@ -67,3 +67,69 @@ React Hook 을 사용할 때는 몇가지 규칙이 있다. |
67 | 67 | ||
68 | 가장 기본적으로 hook 은 어떤 조건문 이나, 반복문 등 에서 사용되선 안된다. | 68 | 가장 기본적으로 hook 은 어떤 조건문 이나, 반복문 등 에서 사용되선 안된다. |
69 | 어떤 함수 내부적으로 소속된 형식에서 hook 을 쓰는 것이 아닌 hook 은 항상 top-level 에 존재해야한다. | 69 | 어떤 함수 내부적으로 소속된 형식에서 hook 을 쓰는 것이 아닌 hook 은 항상 top-level 에 존재해야한다. |
70 | + | ||
71 | +- 5. WS 과 HTTP | ||
72 | +GraphQL Yoga 에는 자체적인 Websocket 기능과 HTTP 기능이 동시에 들어 있다 | ||
73 | +그래서 GraphQL Yoga 를 통해서 BE Server 를 테스트 할때, | ||
74 | +별도의 설정을 하지 않아도 쿼리 구문만 잘 작성하면 Subscription 이 별 문제없이 실행되었다. | ||
75 | +그러나 FE Server 와 BE 를 통합시킬때는 다르다. | ||
76 | +FE 는 이 프로젝트에서 React 만을 사용하였기 때문에, 자체적인 WS 기능이 없다 | ||
77 | +그래서 Apollo 를 통해서 React 와 BE 가 서로 연결되어야 한다 | ||
78 | +하지만, BE 는 이 프로젝트에서 두 가지 네트워크 (WS, HTTP) 를 동시에 가지기 때문에, | ||
79 | +Apollo-boost 에서 제공하는 Apollo-Client 만으로는 이 두개를 동시에 커버하기 어렵다. | ||
80 | +(Apollo-Boost 의 Client 는 link 에 대한 설정 값이 없다, | ||
81 | +좀 더 low-level 로 접근 해야 하기 때문에 Apollo-Client 모듈에서 불러와야 한다. | ||
82 | +참조 : https://www.apollographql.com/docs/react/migrating/boost-migration/) | ||
83 | + | ||
84 | +그래서, apollo-boost 대신에 apollo-client 모듈로 접근을 해야 하며, | ||
85 | +이 프로젝트에서 고려해야할 옵션 사항으로는 | ||
86 | +1. 캐시 메모리를 사용하는 것 | ||
87 | +2. Request Header 를 사용할 수 있어야 하는 것. | ||
88 | +3. link 값을 부여해줄 수 있어야 하는것 | ||
89 | +4. client State 를 사용할 수 있어야 하는 것 | ||
90 | +을 선정할 수 있다. | ||
91 | + | ||
92 | +캐시 메모리는 | ||
93 | +import { InMemoryCache } from "apollo-cache-inmemory"; | ||
94 | +이 모듈로 해결하고 | ||
95 | + | ||
96 | +Header 는 | ||
97 | +const request = async (operation) => { | ||
98 | + const token = await AsyncStorage.getItem('token'); | ||
99 | + operation.setContext({ | ||
100 | + headers: { | ||
101 | + authorization: token | ||
102 | + } | ||
103 | + }); | ||
104 | +}; | ||
105 | + | ||
106 | +로 잡아주고 | ||
107 | + | ||
108 | +3. link 값은 | ||
109 | + | ||
110 | +const httpLink = new HttpLink({ | ||
111 | + uri: "http://localhost:4000/", | ||
112 | +}); | ||
113 | + | ||
114 | +const wsLink = new WebSocketLink({ | ||
115 | + uri: "ws://localhost:4000/", | ||
116 | + options: { | ||
117 | + reconnect: true, | ||
118 | + }, | ||
119 | +}); | ||
120 | + | ||
121 | +const terminatingLink = split( | ||
122 | + ({ query: { definitions } }) => | ||
123 | + definitions.some((node) => { | ||
124 | + const { kind, operation } = node; | ||
125 | + return kind === "OperationDefinition" && operation === "subscription"; | ||
126 | + }), | ||
127 | + wsLink, | ||
128 | + httpLink | ||
129 | +); | ||
130 | +값으로 처리하며, | ||
131 | + | ||
132 | +4. 마지막 client state 는 | ||
133 | +import { withClientState } from 'apollo-link-state'; | ||
134 | +모듈을 이용한다. | ||
135 | + | ... | ... |
-
Please register or login to post a comment