Apollo-link-rest: apollo-link-rest로 response.headers에 액세스하는 방법은 무엇입니까?

@blatoo- 불행히도 그것은 현재 apollo-link-rest에 존재하지 않는 기능입니다.

기본적으로 GraphQL은 헤더를 처리 할 것으로 예상하지 않습니다. 헤더는 그래프에서 깊숙이 반환되어야하기 때문입니다.

누군가 이것을 구현하고 싶다면 응답의 "본문"에 비밀 / 자동 필드로 __headers 을 추가하는 것을 볼 수 있지만이 동작을 활성화하려면 기능 플래그를 추가해야합니다. graphql과 호환되도록 헤더 키를 변경하십시오.

const queryTodos = gql`
      query Todos($page: number, $limit: number) {
        todos(_page: $page, _limit: $limit)
          @rest(type: "[Todo]", path: "/todos/?{args}") {
+             __headers {
+                         XMyHeader
+             }
            userId
            id
            title
            completed
        }
     }
   `;

@fbartho 이 답변에 감사드립니다. 헤더 정보에 접근 할 수 있다면 훌륭한 기능이 될 것입니다. 나는 json-server를 사용하고, 그들은 또한 커서 기반 페이지 매김 정보를 위해 Headers 페이지 매김 정보를 넣습니다.

그건 그렇고, 당신의 문서에서 responseTansformer 및 customFetch 옵션이 있음을 보았습니다. 페이지 매김 정보를 얻기 위해 그들과 무언가를 할 수 있습니까 ??? 실제로 많이 시도했지만 여전히 성공하지 못했습니다 ... :

https://www.apollographql.com/docs/link/links/rest/#response -transforming

https://www.apollographql.com/docs/link/links/rest/#custom -fetch

불행히도 apollo-link-rest 는 GraphQL에 연결하기 위해 apollo-link 의 API에 의존합니다.하지만 이것은 JS Headers API를 직접 공유하는 확실한 방법이 없다고 생각합니다. -그러나 비정규 화 된 버전이 가능할 수 있습니다.

즉, responseTransformer 또는 customFetch 옵션을 사용하여 필요한 것을 패치 할 수 있습니다.

responseTransformer 는 response.headers 속성이있는 JS Response 개체를받습니다.

따라서 다음과 같이 작성할 수 있습니다.

responseTransformer: async (resp: Response) => {
    const body = await resp.json();
    const interestingHeaders = {};
    interestingHeaders.headerOne = resp.headers.get("headerOne"); // Pluck out the headers you want
    body.__headers = interestingHeaders
    return body;
}

브라우저 버전에 따라 headers.get() 대신 headers.entries() 를 사용하여 모든 헤더를 하나의 개체로 가져올 수 있지만 현재 Safari-iOS에서는 사용할 수 없습니다.

이것은 분명히 단순화되고 오류 처리는 당신에게 맡겨져 있지만 이것이 효과가 있다고 생각합니다!

customFetch 도 할 수 있지만 responseTransformer 가 더 쉽다고 생각합니다.

@fbartho 와우, 멋지다! 방금 코드를 시도했는데 작동하고 링크가 있습니다.

이제 또 다른 문제가 발생합니다. 쿼리에서 body.__headers.link 에 어떻게 액세스 할 수 있습니까?

내 쿼리 코드는 다음과 같습니다.

const queryTodos = gql`
  query Todos($page: number, $limit: number) {
    todos(_page: $page, _limit: $limit)
      @rest(type: "TodoPagination", path: "/todos/?{args}") {
      __headers {
        link
      }
      userId
      id
      title
      completed
    }
  }
`;

하지만 __headers 이 null 인 것은 ...
코드는 다음과 같습니다. Client.ts 코드를 추가했고 쿼리 코드는 Todo.tsx .
https://codesandbox.io/s/how-to-access-response-0mqx7?file=/src/Todos.tsx

@fbartho 안녕하세요, 저는 세 가지 다른 방법을 시도했습니다. 드디어이 문제를 해결했습니다. 그러나 나는 그것이 좋은 해결책인지 여전히 의문이다. 나에게 당신의 의견을 줄 수 있습니까?

방법 1 : 실패했습니다.
처음에는 __headers 에서 useQuery() __headers 쿼리를 여러 번 시도했지만 실패했다고 생각합니다.

방법 2 : 해결책을 의심하기 때문에 시도하지 않았습니다.
responseTransformer 에서 응답 구조를 변경하고 __headers 를 __headers 키에 넣은 다음 할 일 목록을 todo 키에 넣습니다. 그러나 좋은 해결책이 아니라고 생각합니다. 왜냐하면 응답의 모든 구조가 변경되기 때문입니다. 따라서 useQuery() 모든 구조를 다시 작성해야합니다.

방법 3 : 성공과 죽음의 단순함
__headers 를 반응 변수에 넣었습니다. responseTransformer 함수에서 __headers 의 값을 반응 변수에 넣고 useQuery() 실행 후 쿼리합니다. 그러나 나는 여전히 확실하지 않습니다. 왜냐하면 다른 쿼리에 대해 다른 반응 변수를 만들어야하기 때문입니다.

@blatoo , 이것은 내 자신이 방금 만난 오래된 문제이며 new ApolloLink 해결했습니다.

const paginationLink = new ApolloLink((operation, forward) => {
  return forward(operation).map((response) => {
    const context = operation.getContext();

    const { headers } = context.restResponses[0] || null;
    // in my case i'm making a bunch of sub queries, so i'm using `[0]` to get the headers from the top level.

    if (headers) {
      const pagination = getPaginationFromHeaders(headers.get('link'));

      return { ...response, data: { ...response.data, pagination } };
    }
    return response;
  });
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: concat(paginationLink, restLink),
});