105 | {(addPost, { data }) => (
106 |
107 |
114 | )}
115 |
116 |
117 | ```
118 |
119 | ## Migrate from Apollo Boost to Apollo client
120 |
121 | [migration](https://www.apollographql.com/docs/react/advanced/boost-migration.html)
122 |
123 | `npm install apollo-client apollo-cache-inmemory apollo-link-http apollo-link-error apollo-link --save`
124 |
125 | ```
126 | import { ApolloClient } from 'apollo-client';
127 | import { InMemoryCache } from 'apollo-cache-inmemory';
128 | import { HttpLink } from 'apollo-link-http';
129 |
130 | const link = new HttpLink({ uri: 'my-graphql-server' });
131 |
132 | const client = new ApolloClient({
133 | link,
134 | cache: new InMemoryCache()
135 | });
136 |
137 | ```
138 |
139 | you can also use [apollo-cache-persist](https://github.com/apollographql/apollo-cache-persist)
140 |
141 | ### Apollo Link is a Network Layer
142 |
143 | Check the [docs](https://www.apollographql.com/docs/react/advanced/network-layer.html#linkMiddleware) for more in depth overview
144 |
145 | ## Authentication
146 |
147 | ```
148 | import { setContext } from 'apollo-link-context';
149 |
150 |
151 | const httpLink = new HttpLink({
152 | uri: "https://graphql-on-postgres-demo.herokuapp.com/v1alpha1/graphql"
153 | });
154 |
155 | const authLink = setContext((_, { headers }) => {
156 | // return the headers to the context so httpLink can read them
157 | return {
158 | headers: {
159 | "X-Hasura-access-key": "my-secret-hash",
160 | }
161 | }
162 | });
163 |
164 | const client = new ApolloClient({
165 | link: authLink.concat(link),
166 | cache: new InMemoryCache()
167 | })
168 |
169 | ```
170 |
171 | ## Subscriptions
172 |
173 | `npm install apollo-link-ws subscriptions-transport-ws apollo-utilities`
174 |
175 | additional imports
176 | ```
177 | import { getMainDefinition } from 'apollo-utilities';
178 | import { split } from 'apollo-link';
179 | import { WebSocketLink } from 'apollo-link-ws';
180 | ```
181 |
182 | setup websocket link
183 | ```
184 | const wsLink = new WebSocketLink({
185 | uri: "wss://graphql-bootcamp-sample-blog.herokuapp.com/v1alpha1/graphql",
186 | options: {
187 | reconnect: true
188 | }
189 | });
190 | ```
191 |
192 | Redirect to operation based on operation definition
193 |
194 | ```
195 | const link = split(
196 | // split based on operation type
197 | ({ query }) => {
198 | const { kind, operation } = getMainDefinition(query);
199 | return kind === 'OperationDefinition' && operation === 'subscription';
200 | },
201 | wsLink,
202 | httpLink,
203 | );
204 | ```
205 |
206 | ## Bonus
207 |
208 | [ReactNativeWeb](https://codesandbox.io/s/xk7zw3n4)
209 |
210 |
211 | ## Hooks
212 |
213 |
214 |
215 | # Angular
216 |
217 | [Setup](https://www.apollographql.com/docs/angular/basics/setup.html)
218 |
219 |
220 | ```
221 | npm install --save apollo-angular \
222 | apollo-angular-link-http \
223 | apollo-link \
224 | apollo-client \
225 | apollo-cache-inmemory \
226 | graphql-tag \
227 | graphql
228 | ```
229 |
230 |
231 | The apollo-client package requires `AsyncIterable` so make sure your `tsconfig.json` includes `esnext.asynciterable`:
232 |
233 | ```
234 | import { HttpClientModule } from '@angular/common/http';
235 | import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
236 | import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
237 | import { InMemoryCache } from 'apollo-cache-inmemory';
238 | ```
239 |
240 | Setup providers
241 |
242 | ```
243 | @NgModule({
244 | imports: [BrowserModule, HttpClientModule, ApolloModule, HttpLinkModule],
245 | providers: [{
246 | provide: APOLLO_OPTIONS,
247 | useFactory(httpLink: HttpLink) {
248 | return {
249 | cache: new InMemoryCache(),
250 | link: httpLink.create({
251 | uri: `https://graphql-bootcamp-sample-blog.herokuapp.com/v1alpha1/graphql`
252 | })
253 | }
254 | },
255 | deps: [HttpLink]
256 | }],
257 | ```
258 |
259 | in component
260 |
261 | ```
262 | rates: any[];
263 | loading = true;
264 | error: any;
265 | ```
266 |
267 | `constructor(private apollo: Apollo) {}`
268 |
269 | ```
270 | ngOnInit() {
271 | this.apollo
272 | .watchQuery({
273 | query: gql`
274 | {
275 | posts(order_by: { timestamp: desc }) {
276 | id
277 | subject
278 | content
279 | user {
280 | firstName
281 | lastName
282 | }
283 | timestamp
284 | }
285 | }
286 | `,
287 | })
288 | .valueChanges.subscribe(result => {
289 | this.posts = result.data && result.data.posts;
290 | this.loading = result.loading;
291 | this.error = result.error;
292 | });
293 | }
294 | ```
295 |
296 |
297 |
298 | [Demo](https://stackblitz.com/edit/basic-apollo-angular-app-i6ejrc)
299 |
300 | [Docs](https://www.apollographql.com/docs/angular)
301 |
302 | # Vue
303 |
304 | [Demo](https://codesandbox.io/s/o1q71q63z)
305 |
306 | [Vue Apollo](https://vue-apollo.netlify.com)
307 |
308 | ```
309 | import { ApolloClient } from 'apollo-client'
310 | import { HttpLink } from 'apollo-link-http'
311 | import { InMemoryCache } from 'apollo-cache-inmemory'
312 | // New Imports
313 | import { split } from 'apollo-link'
314 | import { WebSocketLink } from 'apollo-link-ws'
315 | import { getMainDefinition } from 'apollo-utilities'
316 | ```
317 |
318 | Same as React exept:
319 |
320 | ```
321 | // Install the vue plugin
322 | Vue.use(VueApollo)
323 | ```
324 |
325 | Queries declaration
326 |
327 | ```
328 | new Vue({
329 | apollo: {
330 | // Apollo specific options
331 | },
332 | })
333 | ```
334 |
335 | ```
336 |