hwasurr / graphql-book-fullstack-project Goto Github PK

🍥 질문사항 또는 도움요청 사항

안녕하세요?
85-90쪽까지 진행된 코딩 스타일 및 규칙 적용에서 오류가 나서 글 남깁니다.
도서에 제시해주신대로, 모든 설정을 완료했는데,

.eslintrc.js 파일부터 모든 파일에
{ } [ ] , 와 같은 기호에는 모두 에러 표시가 뜹니다.

설정 전에는 빨간 줄이 뜨지 않아서, 설정 후에 무언가 잘못 된 것 같은데 구글링을 해보아도 비슷한 경우가 없는 것 같아 여쭙습니다.

오타가 있을까 싶어, 남겨주신 프로젝트를 복붙하여 설정했음에도 불구하고 같은 오류가 뜹니다.

어떻게 하면 좋을까요?

🍥 질문사항 또는 도움요청 사항

안녕하세요? 챕터5의 자동 새로고침 요청쪽 질문드립니다.

accessToken의 만료를 10초로 설정하고 refreshToken을 받아 자동으로 만료된 accessToken을 갱신하는 부분을 학습중인데요.
설명해주신 부분대로 진행을 해보아도 access token expired 메시지가 나오며 로그인된 상태가 유지되지 않네요.

쿠키에 refreshtoken값이 있는 것과 redis에 조회했을때 동일한 값임을 확인했고, 심지어 Users 리졸버를 통해 refreshAccessToken 함수가 실행되어 새 토큰값이 발행되는 것 까지 확인했습니다. (다만 그 이후 로직 --제 생각엔 accessToken을 갱신하고 로그인이 유지되도록 처리 -- 이 진행되지 않네요..)

혹시 제가 놓친 부분이 있을까싶어, chapter-5 브랜치와 master 브랜치를 체크아웃해서 토큰만료일 소스만 수정해보아도 동일하게 로그인유지가 되지않습니다.

어느 부분을 수정해야 할까요?

http://localhost:4000/graphql 에서 refreshAccessToken 뮤테이션을 실행하면 null로 응답됩니다. (그 전에 책의 진행상황처럼 로그인 뮤테이션을 수행해도 말이죠)

🐛 버그가 발견된 페이지

p330

🐞 버그를 설명해주세요.

프론트, 백 모두 배포 후 cors가 나옵니다.

소스 코드 보니

  apolloServer.applyMiddleware({
    app,
    cors: {
      origin: [
        'http://localhost:3000',
        'https://studio.apollographql.com',
        process.env.FRONT_ORIGIN || '',
      ],
      credentials: true,
    },
  });

Elastic Beanstalk Enviorment에 FRONT_ORIGIN 추가하여 S3 호스팅 주소 넣었습니다.

계속 CORS에러가 나네요

  apolloServer.applyMiddleware({
    app,
    cors: {
      origin: '*',
      credentials: true,
    },
  });

모두 허용으로 해도 같은 에러를 내뿜고 있네요.
로컬에선 잘됐는데 배포 후 테스트 하니 이렇게 나오네요

🍉 버그를 재현할 방법을 알려주세요

해당 소스 : https://github.com/shldhee/graphql-book-fullstack-project/tree/studying

🌏 오류가 발생한 환경의 OS는 무엇인가요?

• macOS
• Windows
• Linux

🐛 버그가 발견된 페이지

80, 89

🐞 버그를 설명해주세요.

yarn create react-app 으로 설치한 web 폴더의 package.json 파일에서

"eslintConfig": { "extends": "react-app" },
지워야 저장시 포매팅 동작합니다.

server 쪽 코드는 제대로 포매팅 동작하는데, web 폴더는 포매팅이 제대로 동작안해서, 한참 헤맸네요.

근데, 이렇게 하니까 ColorModeSwitcher.tsx파일에 빨간줄 잔뜩 뜨고, package.json에도 빨간줄 뜨네요.
web폴더에 따로 .prettierrc, .eslintrc값을 적용해야할까요?

🍉 버그를 재현할 방법을 알려주세요

저장시 eslint와 prettier 포매팅 문제

🌏 오류가 발생한 환경의 OS는 무엇인가요?

• macOS
• Windows
• Linux

🐛 버그가 발견된 페이지

81p 94p,

🐞 버그를 설명해주세요.

81page 에서 그냥 커멘드로 의존모듈을 한번에 설치하는데요,
버전명시하지 않고 설치하는 바람에 , 향후 94page 에서

yarn add type-graphql 이후 1.1.1 버전이 설치 됩니다.

앞서 서버쪽에 설치된 graphql 이 "^16.6.0" 으로 설치되는데, 1.1.1 과 안맞다는 오류가 납니다.

15.5.1 로 고정해야 합니다.

yarn add graphql:15.5.1

🍉 버그를 재현할 방법을 알려주세요

위 내용과 상동.,

🌏 오류가 발생한 환경의 OS는 무엇인가요?

• macOS
• Windows
• Linux

🐛 버그가 발견된 페이지

94~95

🐞 버그를 설명해주세요.

TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

https://stackoverflow.com/questions/38271273/experimental-decorators-warning-in-typescript-compilation

🍉 버그를 재현할 방법을 알려주세요

1. 해당 레퍼지토리 클론한 후
2. git checkout chapter-3
3. yarn install
4. cd project && cd server && yarn add type-graphql
5. Film.ts 에서 필름 클래스 정의할 때

웹스톰 사용

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true
    }
}

🌏 오류가 발생한 환경의 OS는 무엇인가요?

• macOS
• Windows
• Linux

🐛 버그가 발견된 페이지

98페이지까지 작성하고 yarn dev 실행 후

🐞 버그를 설명해주세요.

yarn dev 실행 후 다음과 같은 에러가 발생합니다.

🍉 버그를 재현할 방법을 알려주세요

98페이지
index.ts까지 작성 후..

모듈 모두 삭제 후 압축 파일 공유 드립니다.

확인 요청 드립니다. 미리 감사드립니다.
graphql-book-fullstack-project.zip

🌏 오류가 발생한 환경의 OS는 무엇인가요?

• macOS
• Windows
• Linux

🍥 질문사항 또는 도움요청 사항

yarn berry 로 작업을 해보려고 합니다. 메모입니다.

🐛 오타 또는 문장 오류가 발견된 페이지

96p, 97p

🍔 오타 또는 문장 오류 내용

as - is
type Film { ... } // 96p
type Query { ... } // 97p
to - be
type Film = { ... }
type Query = { ... }

혹은 인터페이스를 오타로 친것일 수 있다.
컨펌 부탁드립니다. 뒤를 읽지 않아서요.

🍥 질문사항 또는 도움요청 사항

안녕하세요.

저서 94페이지에서
type-graphql에 인스톨이 정상적으로 되지 않습니다.

찾아보면 graphql 15만 지원을 하는거 같은데 맞나요 ???
graphql의 버전을 15로 맞춰서 진행을 하면되겠지만,
16버전에 경우에는 어떻게 진행을 하는게 좋을지 질문드립니다.

관련 에러 공유드립니당

감사합니다.

🐛 오타 또는 문장 오류가 발견된 페이지

113p~114p

🍔 오타 또는 문장 오류 내용

안녕하세요. 책 읽다가 오타가 발견되고 질문도 있어서 글 남깁니다.

https://github.com/hwasurr/graphql-book-fullstack-project/blob/master/project/web/src/components/film/FilmCard.tsx
FilmCard 부분의 코드 관련된 부분입니다.

1. 114 페이지 코드 부분의 10번째 줄에
   <Image src={film.posterImg} 부분이
   <Image src={film.posterImg} />
   로 수정돼야 할 것 같습니다 끝에 />가 빠졌습니다.

다만 깃허브에는 올바르게 돼있어서 참고해 해결할 수 있었습니다.

2. 113페이지 코드 부분 밑에서 6번째 줄에
   film: FilmsQuery['films']['films'][0]
   라고 ['films']가 두 번 나와있는데요.

이 부분가 관련해 122페이지 진행 전, filmlist 컴포넌트 수정 전까지는 ['films']를 두 번 쓴 것에 대해 아래와 같은 에러가 나왔습니다.

• '({ __typename?: "Film" | undefined; } & Pick<Film, "id" | "title" | "subtitle" | "runningTime" | "release" | "posterImg"> & { director: { __typename?: "Director" | undefined; } & Pick<...>; })[]' 형식에 'films' 속성이 없습니다.ts(2339)

그런데 122페이지까지 진행한 뒤에는 두 번 쓴 게 올바른 걸로 돼서 수정을 했습니다.

['films']['films'] 가 어떤 역할을 하는지 궁금합니다.
[paginatedfilms] 와 film 배열을 불러오기 위해 이렇게 작성해야 하는 것이었을까요?

3. p.133 코드 부분 밑에서 12번째 부분
   href="/signup
   부분이 에러가 납니다.
   button 에 href 속성이 없다고 나옵니다.

밑에 as ={RouterLink} to="/signup" 이 있어서 href 부분은 지워도 문제 없이 작동되는데, 혹시 버전이 달라지면서 사용법이 바뀐 걸까요?

책 잘 보면서 많이 배우고 있습니다. 좋은 책 집필해 주셔서 감사합니다.

🐛 버그가 발견된 페이지

p.266-269

🐞 버그를 설명해주세요.

오타라기 보단 설명 누락인 듯한 부분입니다.

267페이지까지 따라한 후 뮤테이션 실행 테스트 전에

/project/server/src/apollo/createApolloServer.ts 에서
schema: await buildSchema({ resolvers: [FilmResolver, CutResolver, UserResolver,CutReviewResolver],
와 같이 CutReviewResolver를 추가해 줘야 한다는 설명이 들어가야 할 것 같습니다.

그러지 않고 268페이지의 뮤테이션을 실행하면 status 400과 함께 아래와 같은 응답이 나옵니다.

  "message": "Unknown type \"CreateOrUpdateCutReviewInput\".",
  "extensions": {
    "code": "GRAPHQL_VALIDATION_FAILED",

물론 github의 history를 살펴보면 확인할 수 있고, 사실 앞에서 반복했던 부분이라 당연히 해줘야 하는 부분인 듯 합니다.(yarn codegen처럼)
다만 저는 아직 너무 초보고 감이 없어서 ㅎㅎ.... 미처 바로 생각을 못했습니다. 책에 설명이 있어야 더 잘 배울 수 있을 것 같습니다.

감사합니다.

🍉 버그를 재현할 방법을 알려주세요

/project/server/src/apollo/createApolloServer.ts 수정 없이 뮤테이션 실행

🌏 오류가 발생한 환경의 OS는 무엇인가요?

• macOS
• Windows
• Linux

🍥 질문사항 또는 도움요청 사항

안녕하세요?
검색했는데, 방법이 나오지 않아 질문드립니다...

저서 128쪽에 react-router-dom을 통해 BrowserRouter을 가져오면 다음과 같은 오류가 뜹니다.
혹시 해결 방법이 있을까요?

🐛 버그가 발견된 페이지

112

🐞 버그를 설명해주세요.

react array에서 key 에러납니다

new Array(6).fill(0).map((x) => <Skeleton key={x} height="400px" />

=>

new Array(6).fill(0).map((_, index) => <Skeleton key={index} height="400px" />

🍉 버그를 재현할 방법을 알려주세요

node v18
vite

🌏 오류가 발생한 환경의 OS는 무엇인가요?

• macOS
• Windows
• Linux