1

我有一个简单的 axios 调用，我想调用它来获取一些 graphql 数据。我还有一个.gql要导入以用作查询的文件：

页面.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: missing ) 在参数列表之后

所以我不能只导入 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
  }
}

我发现像这样导入 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)
    })

还有比这更好的方法吗？

4

1 回答 1

7

graphql 标签模板字面量（gql`..`）将 graphql 查询解析为 AST（抽象语法树；进一步阅读：https ://www.contentful.com/blog/2018/07/04/graphql-abstract-syntax-tree-new-架构/）。解析为 AST（在客户端）的优点是它允许您对查询进行 lint 并简化查询处理，例如使用片段（请参阅：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);
于 2019-09-10T14:49:24.377 回答