React 및 GraphQL - 08을 사용하여 Reddit 클론 만들기

지난 블로그 게시물에서 홈페이지에서 이름을 업데이트하는 동안 문제가 있음을 확인했습니다. 이 문제를 해결하려면 업데이트 캐시 메커니즘을 추가해야 합니다. 관련 패키지를 추가해 보겠습니다.

yarn add @urql/exchange-graphcache

이제 exchanges 페이지의 createClient에 _app.tsx를 추가해야 합니다. cacheExchange가 @urql/exchange-graphcache에서 오는지 확인하십시오.  . 이제 사용자 정의 업데이트가 필요합니다. 그렇게 하려면 update 속성을 cacheExchange 옵션에 추가하십시오. Mutation 개체 내부에서 이름과 일치해야 합니다.

exchanges: [
  dedupExchange,
  cacheExchange({
    updates: {
      Mutation: {
        login: (result: LoginMutation, args, cache, info) => {
          cache.updateQuery({ query: MeDocument }, (data: MeQuery) => {});
        },
      },
    },
  }),
  fetchExchange,
];

여기에서 유형 지원이 약간 부족합니다. 그래서 우리는 도우미 함수를 만들고 있습니다.

function cacheUpdateQuery<Result, Query>(
cache: Cache,
qi: QueryInput,
result: any,
fn: (r: Result, q: Query) => Query
) {
    return cache.updateQuery(qi, (data) => fn(result, data as any) as any);
}

이제 updateQuery 객체 내부에서 Mutation를 호출하는 대신 이 함수를 사용할 수 있습니다. 모든 로그인 및 등록에 대해 캐시 업데이트를 추가하고 있습니다. 코드를 교체하면 아래 코드로 끝납니다.

login: (_result, args, cache, info) => {
  cacheUpdateQuery<LoginMutation, MeQuery>(
    cache,
    { query: MeDocument },
    _result,
    (result, query) => {
      if (result.login.errors) {
        return query;
      } else {
        return {
          me: result.login.user,
        };
      }
    }
  );
},
register: (_result, args, cache, info) => {
  cacheUpdateQuery<RegisterMutation, MeQuery>(
    cache,
    { query: MeDocument },
    _result,
    (result, query) => {
      if (result.register.errors) {
        return query;
      } else {
        return {
          me: result.register.user,
        };
      }
    }
  );
}

여기서 우리가 변경해야 할 한 가지는 사용자가 graphql 쿼리 전체에 걸쳐 props를 반복한다는 점입니다. 그래서 우리는 그것을 조각으로 옮깁니다.

이제 Logout 기능을 추가하겠습니다. 그렇게 하려면 logout 돌연변이를 추가해야 합니다. 거기에서 우리는 서버의 세션을 파괴하기 위한 요청과 쿠키를 지우기 위한 응답 객체를 사용할 수 있습니다.

@Mutation(() => Boolean)
  logout(@Ctx() { req, res }: RedditDbContext) {
    return new Promise((resolver) =>
      req.session.destroy((err) => {
        res.clearCookie(COOKIE_NAME);
        if (err) {
          console.log(err);
          resolver(false);
          return;
        }
        resolver(true);
        // TODO: Seems I need to check this again
      })
    );
}

이제 GraphQL 쿼리를 처리하고 웹 앱에서 유형을 생성합니다.

다음은 GraphQL Playground의 로그아웃 쿼리입니다.

mutation {
  logout
}

그런 다음 NavBar 로그아웃 버튼에 이것을 추가하십시오.

<Button
  onClick={() => {
    logout();
  }}
  isLoading={logoutFetching}
  variant="link"
>

지금까지는 쿠키를 성공적으로 제거할 수 있었지만 여전히 캐시는 업데이트되지 않았습니다. 이제 cacheExchange  에 새로운 돌연변이를 추가해 보겠습니다.

logout: (_result, args, cache, info) => {
cacheUpdateQuery<LogoutMutation, MeQuery>(
  cache,
  { query: MeDocument },
  _result,
  () => {
    return {
      me: null,
    };
  }
);
},

이제 로그아웃하면 캐시도 null 로 설정됩니다.

이상으로 이번 포스팅을 마치겠습니다. 이와 관련하여 질문할 사항이 있으면 여기에 댓글을 남겨주세요. 또한 내 이해에 따라 이것을 썼습니다. 따라서 잘못된 점이 있으면 주저하지 말고 저를 수정하십시오. 정말 감사합니다.
오늘의 친구들을 위한 것입니다. 곧 봐요. 고맙습니다.

참조:

이 기사 시리즈는 . 이것은 놀라운 튜토리얼이며 확인하는 것이 좋습니다.

기본 이미지credit