將graphql查詢.gql文件導入純Javascript並運行axios調用

Question

我有一個簡單的axios調用，我想調用它來獲取一些graphql數據。 我也有一個要導入以用作查詢的.gql文件：

pages.gql

{
  entries(section: [pages]) {
    uri
    slug
  }
}

現在，在我的另一個文件中，我想導入該文件：

import query from './queries/pages.gql'

稍后再進行該axios調用：

const routes = await axios.post(
    endpoint,
    { query },
    { headers: { Authorization: `Bearer ${token}` } }
  )
  .then(result => {
    console.log('result: ', result)
  })
  .catch(error => {
    console.log('error: ', error)
  })

但是每當我這樣做的時候，我都會得到這個錯誤：

缺少）參數列表后09:55:25

條目（節：[頁數]）{

^^^^^^^^

參數列表后出現SyntaxError：缺少）

所以我不能只導入gql文件。 我已經導入了graphql-tag （ import gql from 'graphql-tag' ），所以我可以這樣做：

const QUERY = gql`
  ${query}
`

但是首先我必須導入gql文件，對嗎？

任何幫助將不勝感激...歡呼

----編輯2019-08-28：----

好，另一種情況：

我有一個axios呼叫，就像一個護身符一樣工作：

await axios
    .post(
      endpoint,
      { query: `query Page($slug: String!) {
          entries(section: [pages], slug: $slug) {
            slug
            title
          }
        }`,
        variables: { slug: params.slug }
      },
      { headers: { Authorization: `Bearer ${env.GRAPHQL_TOKEN}` } }
    ).then(result => {
      console.log('result: ', result)
    })
    .catch(error => {
      console.log('error: ', error)
    })

我也有一個具有完全相同內容的page.gql文件：

query Page($slug: String!) {
  entries(section: [pages], slug: $slug) {
    slug
    title
  }
}

我發現import page from '~/apollo/queries/page'導入page.gql文件（例如此import page from '~/apollo/queries/page'將導入以下結構：

    page:  {                                                                                                                                         15:16:40
        kind: 'Document',
        definitions: [...],
        loc: {
            start: 0,
            end: 181,
            source: {
            body: 'query Page($slug: String!) {\n  ' +
                'entries(section: [pages], slug: $slug) {\n    ' +
                'slug\n    title\n   }\n  }\n}\n',
            name: 'GraphQL request',
            locationOffset: [Object]
            }
        },
        Page: {...}
    }

因此，要在查詢中使用page.gql，我必須使用以下page.loc.source.body ：

  await axios
    .post(
      endpoint,
      { query: page.loc.source.body,
        variables: { slug: params.slug }
      },
      { headers: { Authorization: `Bearer ${env.GRAPHQL_TOKEN}` } }
    ).then(result => {
      console.log('result: ', result)
    })
    .catch(error => {
      console.log('error: ', error)
    })

有沒有比這更好的方法了？

Answer 1

graphql標記模板文字（ gql`..` ）將graphql查詢解析為AST（抽象語法樹;進一步閱讀： https ://www.contentful.com/blog/2018/07/04/graphql-abstract-syntax -tree-new-schema / ）。 解析到AST（在客戶端）的優點是，它可以使您的查詢更短並簡化查詢處理，例如使用片段（請參閱： https : //github.com/apollographql/graphql-tag#why-use -這個 ）

如果要將查詢傳遞給axios / fetch，則需要使用graphql打印機fn（ https://graphql.org/graphql-js/language/#printer ）將其解析回實際的查詢字符串：

import gql from 'graphql-tag';
import { print } from 'graphql/language/printer';

const AST = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`
const query = print(AST);