基于变量获取 GraphQL 数据

Question

我正在尝试让我的查询对参考做出反应属性。

https://v4.apollo.vuejs.org/guide-composable/query.html#variables 这根本行不通

   const { result, variables } = useQuery(gql`
      query {
        episodes(page: $page) {
          info {
            pages
            count
          }
          results {
            name
          }
        }
      }
    `, {
      page: 2
    });

也试过了

setup() {
    const currentPage = ref(1);
    const { result } = useQuery(gql`
      query {
        episodes(page: ${currentPage.value}) {
          info {
            pages
            count
          }
          results {
            name
          }
        }
      }
    `);
      function pageChange() {
        currentPage.value += 1;
        console.log(currentPage.value)
    }
    return { result, currentPage, pageChange };
  },

当我手动输入页码时，下面的代码对我有用，但我想将页码作为变量传递，因为我的分页页增加了，我希望查询刷新。

    const { result, loading } = useQuery(gql`
      query {
        episodes(page: 2) {
          info {
            pages
            count
          }
          results {
            name
          }
        }
      }
    `,  
    );

有人可以帮助我吗？

Answer 1

在你给的 link 中 query 后跟查询名称。

const { result } = useQuery(gql`
  query getUserById ($id: ID!) {
    user (id: $id) {
      id
      email
    }
  }
`, {
  id: 'abc-abc-abc',
})

您没有指定查询名称试试这个：

   const { result, variables } = useQuery(gql`
      query episodes($page: Int) {
        episodes(page: $page) {
          info {
            pages
            count
          }
          results {
            name
          }
        }
      }
    `, {
      page: 2
    });

我不知道您的架构是什么样的，但我推断该页面是 Int。如果不是按页面类型Int改变

基于变量获取 GraphQL 数据

Fetch GraphQL data based on variable

vue.js

graphql

vuejs3