@vitalysokolov

Как исправить ошибку с InMemoryCache, чтобы не терять результаты предыдущих query в GraphQL?

В приложении на React сделал бесконечную прокрутку, запрашивая данные из GraphQL query. Но неправильно реализовал кеширование предыдущих загруженных результатов, в следствие чего при прокрутке новые результаты не добавляются к ранее загруженным, а заменяют их.
Использую Apollo, делал по их документации, но не могу разобраться с InMemoryCache.

Так выглядит query:
export const getEmailsQuery = gql`
  query GetEmails($offset: Int, $limit: Int) {
    getEmailAccounts(userInput: { offset: $offset, limit: $limit }) {
      id
      userId
      email
      dateCreated
      dateUpdated
    }
  }
`;


const [offset, setOffset] = useState(0);   // прибавляю offset после каждой прокрутки до конца экрана

  const {
    data: emailsData,
    loading: emailsDataLoading,
    fetchMore: emailsFetchMore,
    refetch: emailsRefetch,
  } = useQuery(getEmailsQuery, {
    variables: {
      offset,
      limit: 20,
    },
  });
 
  const cache = new InMemoryCache({
    typePolicies: {
      GetEmails: {
        fields: {
          getEmailAccounts: {
            keyArgs: [],
            merge(existing, incoming, { args: { offset }}) {
              const merged = existing ? existing.slice(0) : [];
              for (let i = 0; i < incoming.length; ++i) {
                merged[offset + i] = incoming[i];
              }
              return merged;
          }
        }
      }
    }
  }});

    const handleScroll = async () => {
      if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
      await emailsFetchMore({
        variables: {
          offset
        },
        updateQuery: (prev, { fetchMoreResult }) => {
          if (!fetchMoreResult) return prev;
          return Object.assign({}, prev, {
            feed: [...prev.feed, ...fetchMoreResult.feed]
          });
        }
      });
      setOffset(offset + 20);
    };

    useEffect(() => {
      window.addEventListener("scroll", handleScroll);
      return () => window.removeEventListener("scroll", handleScroll);
    }, []);


Отображаю результаты
{emailsData &&
          emailsData.getEmailAccounts.map((e, i) => (
...
          ))}


Если сделать console.log(cache), то в нём я не нахожу данных.
oB88rd7.png
Подскажите, где я ошибся.
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы