Vue Apollo «__typename» не определено в updateQuery - PullRequest
Новая
       175

Vue Apollo «__typename» не определено в updateQuery

0 голосов
/ 06 августа 2020

Я пытаюсь создать кнопку «Показать больше» для индекса моих сообщений. Индексный запрос загружается нормально с первыми 5 сообщениями, когда я нажимаю кнопку Показать больше, я вижу, что возвращаются новые сообщения, однако я получаю кучу ошибок, например: 

Missing field id in {
  "__typename": "Post",
  "posts": [
    {
      "id": "5f2b26600c3ec47b279d8988",
      "title":

Я получаю по одному из каждого из эти ошибки характерны для каждого атрибута сообщения (id, title, content, slug, et c). Это предотвращает добавление фактических новых сообщений в индекс. Что вызывает эту проблему? 

<script>

  import postsQuery from '~/apollo/queries/blog/posts';

  const pageSize = 5;

  export default {
    name: 'BlogIndex',

    data: () => ({
      loadingMorePosts: false,
      page: 0,
      pageSize,
    }),

    apollo: {
      postsCount: {
        prefetch: true,
        query: postsQuery,
        variables: {
          page: 0,
          pageSize,
        }
      },
      posts: {
        prefetch: true,
        query: postsQuery,
        variables: {
          page: 0,
          pageSize,
        }
      },
    },

    computed: {
      morePosts() {
        return this.posts.length < this.postsCount.aggregate.totalCount;
      }
    },

    methods: {
      async fetchMorePosts() {
        this.page += this.pageSize;

        this.$apollo.queries.posts.fetchMore({
          variables: {
            page: this.page,
            pageSize,
          },
          updateQuery: (previousResult, { fetchMoreResult }) => {
            const newPosts = fetchMoreResult.posts;
            console.log('typename: ', previousResult.posts.__typename); <--- returns undefined

            if (!newPosts.length) return previousResult;

            return {
              posts: {
                __typename: previousResult.posts.__typename,
                posts: [...previousResult.posts, ...newPosts],
              }
            }
          }
        })
      },
    },
  }
</script>

UPDATE: добавлен запрос на импортированные сообщения 

query Posts($page: Int!, $pageSize: Int!) {
  posts(
    start: $page
    limit: $pageSize
    sort: "published_at:desc"
    where: { published: true }
  ) {
    id
    title
    content
    slug
    published
    createdAt
    updatedAt
    published_at
  }
  postsCount: postsConnection(where: { published: true }) {
    aggregate {
      totalCount
    }
  }
}

1 Ответ

2 голосов
/ 06 августа 2020

Я думаю, что проблема здесь: 

            return {
              posts: {
                __typename: previousResult.posts.__typename,
                posts: [...previousResult.posts, ...newPosts],
              }
            }

Я почти уверен, что __typename должно принадлежать каждому объекту сообщения, а не части коллекции сообщений. Сообщите мне, как, если что-то вроде этого исправит это: 

            return {
              posts: {
                posts: [...previousResult.posts, ...newPosts]
              }
            }

и измените запрос на: 

query Posts($page: Int!, $pageSize: Int!) {
  posts(
    start: $page
    limit: $pageSize
    sort: "published_at:desc"
    where: { published: true }
  ) {
    __typename    // add this here
    id
    title
    content
    slug
    published
    createdAt
    updatedAt
    published_at
  }
  postsCount: postsConnection(where: { published: true }) {
    aggregate {
      totalCount
    }
  }
}
...