如何导入 GraphQL 查询？

Question

我的项目设置为导入 .graphql 文件。那很好用。但我的问题是我不知道如何在 .graphql 文件中定义查询并将其导入组件以与 react-apollo 的 <Query ...> 组件一起使用。

在 this example 中，作者使用 gql:

在 JavaScript 变量中定义查询

import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

const Dogs = ({ onDogSelected }) => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (loading) return "Loading...";
      if (error) return `Error! ${error.message}`;

      return (
        <select name="dog" onChange={onDogSelected}>
          {data.dogs.map(dog => (
            <option key={dog.id} value={dog.breed}>
              {dog.breed}
            </option>
          ))}
        </select>
      );
    }}
  </Query>
);

但是，我想将该查询存储在单独的 .graphql 文件中并将其导入到组件中。

这是我在我的项目中尝试过的。这是一个组件，我尝试从我的架构中导入 UserQuery。

import React from 'react'
import { Query } from 'react-apollo'

import { UserQuery } from '../api/schema.graphql'

export default () => 
    <Query query={ UserQuery }>
        {({ loading, error, data }) => {
            if (loading) return 'Loading...'
            if (error) return `Error! ${error.message}`
            return
                <ul>
                    {data.users.map(name => <li>{name}</li>)}
                </ul>
        }}
    </Query>

这里是 schema:

# schema.graphql

query UserQuery {
    user {
        name,
        age,
        gender        
    }
}

type User {
    name: String,
    age: Int,
    gender: String
}

type Query {
    say: String,
    users: [User]!
}

当我尝试导入和使用时出现错误：

modules.js?hash=e9c17311fe52dd0e0eccf0d792c40c73a832db48:28441 Warning: Failed prop type: The prop query is marked as required in Query, but its value is undefined.

如何以这种方式导入查询？

Answer 1

要导入 GraphQL 查询，您需要特定的加载程序。当你使用 webpack 时，你可以使用 graphql-tag 中的 graphql-tag/loader。它会将您的查询转换为 JavaScript 模块，以便它们可以被 webpack 导入。此外，您不应将架构和查询放入同一个文件中。我不认为 GraphQL 加载器是为导出模式定义语言而设计的（尽管它可能能够解析它，因为 GraphQL-JS 解析器解析两者）。专门为查询创建一个文件。如果文件中只有一个查询，您可以将查询导入为 default

import UserQuery from 'UserQuery.graphql';

如果有多个定义，例如片段、突变等。它们被导出为带有名称的命名导出。

这使得一切都比使用 GraphQL 加载器要复杂一些。调试模块的提示：您可以 console.log 或检查模块的内容。

import * as file from 'UserQuery.graphql';
console.log(file);

这会将对象打印到您的（浏览器）控制台，您可以看到导出的名称作为对象中的键。

如何导入 GraphQL 查询？

How to import GraphQL query?

reactjs

graphql

react-apollo