Apollo-link-rest: ๋Œ์—ฐ๋ณ€์ด ์›์ธ : ERROR ์˜ค๋ฅ˜ : ๋„คํŠธ์›Œํฌ ์˜ค๋ฅ˜ : ๊ธ€๋กœ๋ฒŒ์ด ์ •์˜๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2019๋…„ 07์›” 12์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: apollographql/apollo-link-rest


ํ˜„์žฌ Angular 7, apollo-rest link 0.7.3 ์‚ฌ์šฉ

๋งˆ์นจ๋‚ด ๋Œ์—ฐ๋ณ€์ด๊ฐ€ ๋ถ€๋ถ„์ ์œผ๋กœ ์ž‘๋™ํ•˜๊ณ  global ๊ฐ€ ์ดˆ๊ธฐํ™”๋˜์ง€ ์•Š๊ณ ์ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ํ•œ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

core.js:15724 ERROR Error: Network error: global is not defined
    at new ApolloError (bundle.esm.js:60)
    at Object.error (bundle.esm.js:1032)
    at notifySubscription (Observable.js:134)
    at onNotify (Observable.js:165)
    at SubscriptionObserver.error (Observable.js:224)
    at Object.error (Observable.js:463)
    at notifySubscription (Observable.js:134)
    at onNotify (Observable.js:165)
    at SubscriptionObserver.error (Observable.js:224)
    at bundle.umd.js:807

ํด๋ผ์ด์–ธํŠธ ์ดˆ๊ธฐํ™”

const restLink = new RestLink({
    uri: 'http://localhost:5000/api',
    credentials: 'same-origin',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    }
  });
  return {
    link: restLink,
    cache
  };

์ด ๋Œ์—ฐ๋ณ€์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

export const addTodo = gql`
    mutation addTodo($input: Todo!){
      addTodo(input: $input) @rest( type: "Todo", method: "POST", path: "/todos" ) {
       ...todoFragment
      }
  }
  ${todoFragment}
`;

๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

 add(text: string): void {

    this.apollo.mutate({
      mutation: addTodo,
      variables: {
        input: {
          description: text,
          completed: false
        }
      }
    }).subscribe(({data}) => {
      console.log('got data', data);
    }, (error) => {
      console.log('there was an error sending the query', error);
    });

์˜ค๋ฅ˜๋ฅผ ์ผ์œผํ‚ค๋Š” ์„ ์€ ๊ทธ๋ฆผ์— ์•„๋ž˜์— ์žˆ์Šต๋‹ˆ๋‹ค.

Screen Shot 2019-07-12 at 12 17 35 PM

์ด global.FileList ์ „์—ญ ๊ฐœ์ฒด๊ฐ€ ์ •์˜๋˜์ง€ ์•Š์€ ์ด์œ ๋ฅผ ์•„์‹ญ๋‹ˆ๊นŒ?

// FileList/File are only available in some browser contexts
        // Notably: *not available* in react-native.
        if ((global.FileList && object instanceof FileList) ||
            (global.File && object instanceof File)) {
            // Object is a FileList or File object => no keys to convert!
            return object;
        }
help wanted ๐Ÿ›  questionโ”

๋ชจ๋“  5 ๋Œ“๊ธ€

์ด๊ฒƒ์€ polyfills.ts์— ์ค„์„ ์ถ”๊ฐ€ํ•ด์•ผํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฒ˜์Œ์—๋Š” angular-cli ๋ฌธ์ œ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.

https://github.com/angular/angular-cli/issues/8160
๊ทธ๋Ÿฌ๋‚˜ ์ด์— ๋Œ€ํ•œ ์‘๋‹ต์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. globals does not exists in browser and should not be in the client-side code ?

REST LINK์— ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๊นŒ?

์ €์—๊ฒŒ ๋‰ด์Šค์ž…๋‹ˆ๋‹ค. React-Native ๋ฐ ๊ธฐํƒ€ ํ™˜๊ฒฝ์—์„œ global ๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๊นŒ? ๋ธŒ๋ผ์šฐ์ €์—์„œ global ๊ฐœ์ฒด๋Š” ์ฐฝ์ด๋ฏ€๋กœ window.global = window ์™€ ๊ฐ™์ด ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ํ•œ ์ผ์€ Angular์—์„œ ์ œ์•ˆํ•œ ๊ฒƒ๊ณผ ๊ฐ™์•˜์ง€๋งŒ ๊ทธ๋“ค์€ ์ด๊ฒƒ์„ ์ง€์˜ฅ์œผ๋กœ ๊ฐ„์ฃผํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋‚ด๊ฐ€ ๋งจ ์•„๋ž˜์—์„œ ํ•œ ์ผ์ž…๋‹ˆ๋‹ค.

https://github.com/fkolar/todo-rest/blob/master/src/polyfills.ts

https://github.com/fkolar/todo-rest

๋‚˜๋Š” ์ด๊ฒƒ์ด ํ•ดํ‚น์ด๋ผ๋Š” ๋ฐ ๋™์˜ํ•˜์ง€๋งŒ ์ฝ”๋“œ๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰๋˜์–ด์•ผํ•˜๋Š”์ง€ ์•„๋‹ˆ๋ฉด ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ ์‹คํ–‰๋˜์–ด์•ผํ•˜๋Š”์ง€ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Apollo-link-rest๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ  / ๋งํฌ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋ณ€๊ฒฝ์„ ์ง€์›ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค! ์•ˆํƒ€๊น๊ฒŒ๋„ window ์€ (๋Š”) ๋ชจ๋ฐ”์ผ์— ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์—ฌ๊ธฐ์— ์•ฝ๊ฐ„ ๊ฐ‡ํ˜€ ์žˆ์Šต๋‹ˆ๋‹ค!

๋ฐฉ๊ธˆ์ด ๋ฌธ์ œ์— ๋ถ€๋”ช ํ˜”์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰