如何在使用 nuxt-apollo 的同时使用 GraphQL 查询？

Question

我正在尝试从 Django 端点查询数据，该端点使用 Graphene Django 列出了我所有的 articles。我遵循了所有文档，但无法理解如何在 vuex 操作中获取数据。

当使用GraphiQl时，我可以获得数据答案。我已经安排好我的 nuxt.config.js

apollo: {
    tokenName: "nuxt-apollo", // specify token name
    cookieAttributes: {
      expires: 7 // optional, default: 7 (days)
    },
    defaultOptions: {
      $query: {
        fetchPolicy: "network-only",
        errorPolicy: "all"
      }
    },
    watchLoading: "@/apollo/loadingHandler.js",
    errorHandler: "@/apollo/errorHandler.js",
    clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:8000/api/articles/graphql/'
      }
    }
  },

现在在我的 vuex 商店中，但我不知道如何查询和使用数据，我尝试如下查询但没有成功：

async fetchArticles({ commit }) {
    try {
      const response =  this.$axios.$get(
        'articles/graphql/',
        {
          query: query({
            query: gql`
              query Articles {
                allArticles {
                  id
                  title
                }
              }
            ` 
          }) 
        }
      )
        
    } catch (error) {
      commit('setError', error)
    }
  },

你能帮我解决我的问题吗？谢谢

Answer 1

您只需安装 graphql-tag 库即可创建通过 Apollo Client 发送的查询。

您也可以创建名为 article.graphql 的文件：

query Articles {
    allArticles {
      id
      title
    }
 }

也像这样传参查询：

query ($param: [String]) {
   //your query
}

店内使用情况：

import articleQuery from './queries/article.graphql';
....
// some store action
async fetchArticles({ commit }) {
    const client = this.app.apolloProvider.clients.default;

    // Optional Param   
    // const param = format(new Date(), 'yyyy-MM-dd');

    const queryResult = 
       await client.query({
          query: articleQuery,
          // Optional (if query contain parameter you can use)
          // variables: { param }
        });
}

如何在使用 nuxt-apollo 的同时使用 GraphQL 查询？

How to use GraphQL queries while using nuxt-apollo?

apollo

graphql

axios

nuxt.js