sdy

add new error case

...@@ -66,4 +66,70 @@ React Hook 을 사용할 때는 몇가지 규칙이 있다. ...@@ -66,4 +66,70 @@ React Hook 을 사용할 때는 몇가지 규칙이 있다.
66 (참고 : https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level) 66 (참고 : https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level)
67 67
68 가장 기본적으로 hook 은 어떤 조건문 이나, 반복문 등 에서 사용되선 안된다. 68 가장 기본적으로 hook 은 어떤 조건문 이나, 반복문 등 에서 사용되선 안된다.
69 -어떤 함수 내부적으로 소속된 형식에서 hook 을 쓰는 것이 아닌 hook 은 항상 top-level 에 존재해야한다.
...\ No newline at end of file ...\ No newline at end of file
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 +
......