TIL 20/11/19

graphql

맞는예

 createCollector({
      variables: {
        CreateCollectorInput: data,
      },
    });

틀린예

createCollector({
      variables: {
        CreateCollectorInput: data,
      },
    });

export const CREATE_COLLECTOR = gql`
  mutation createCollector($CreateCollectorInput: CreateCollectorInput!) {
    createCollector(createCollectorInput: $CreateCollectorInput) {
      ids
      message
    }
  }
`;

리졸버의 alias의 args $변수에 variables의 키값이 매핑된다.밑의 리졸버늬 args의 변수명이 아니다.

apollo

import { offsetLimitPagination } from "@apollo/client/utilities"

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        feed: offsetLimitPagination(["type"]),
      },
    },
  },
});

const FeedData({ type = "PUBLIC" }) {
  const { loading, data, fetchMore } = useQuery(FEED_QUERY, {
    variables: {
      type: type.toUpperCase(),
      offset: 0,
      limit: 10
    },
  });

  // If you want your component to rerender with loading:true whenever
  // fetchMore is called, add notifyOnNetworkStatusChange:true to the
  // options you pass to useQuery above.
  if (loading) return <Loading/>;

  return (
    <Feed
      entries={data.feed || []}
      onLoadMore={() => fetchMore({
        variables: {
          offset: data.feed.length
        },
      })}
    />
  );
}

feed리졸버를 페이지네이션처리할때 type별로 데이터를 merge할경우 keyArgs로 "type"을 주면된다.분기하지 않고 feed리졸버에 대한 모든 데이터를 merge할경우 InMemoryCache에 아무처리도 안하면 된다. feed: offsetLimitPagination()나 feed: offsetLimitPagination([])로 처리해본결과 캐시에는 들어왔으나 useQuery의 data로 값이 전달되지 않았다.