如何导入 GraphQL 查询?

Question

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

在这个例子中，作者使用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 警告：失败的道具类型：道具query在Query中标记为必需，但其值为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);

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