如何在.graphql文件定义查询并导入至React组件配合react-apollo使用

没问题，我来一步步教你怎么把 .graphql 文件里的查询和 react-apollo 的 <Query> 组件配合起来用：

首先，创建一个单独的 .graphql 文件（比如 src/queries/GET_DOGS.graphql），把你的查询写进去，记得给查询起个明确的名字（方便调试和 Apollo 缓存管理）：

query GetDogs {
  dogs {
    id
    breed
  }
}

这里的 GetDogs 是查询的名称，建议用 PascalCase 命名，和 React 组件的命名风格统一。

你说已经配置好能导入 .graphql 文件了，这里快速核对下常见的配置方式（确保万无一失）：

• 如果用 Webpack，检查 webpack.config.js 里是否添加了 graphql-tag/loader 规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader',
      },
    ],
  },
};

• 如果用 Babel，确认是否配置了 babel-plugin-graphql-tag 插件（在 .babelrc 里）：

{
  "plugins": ["graphql-tag"]
}

这两种配置都会把 .graphql 文件的内容编译成 gql 包裹的 AST 对象，和你之前在 JS 里直接写 const GET_DOGS = gql...`` 的效果完全一致。

现在就可以直接把 .graphql 文件导入到组件里，然后传给 <Query> 组件的 query 属性了：

import { Query } from "react-apollo";
// 直接导入.graphql文件，变量名建议和查询名对应
import GET_DOGS from "./queries/GET_DOGS.graphql";

const Dogs = ({ onDogSelected }) => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error fetching dogs!</p>;

      return (
        <ul>
          {data.dogs.map(dog => (
            <li key={dog.id} onClick={() => onDogSelected(dog)}>
              {dog.breed}
            </li>
          ))}
        </ul>
      );
    }}
  </Query>
);

export default Dogs;

导入后的 GET_DOGS 和你之前用 gql 在 JS 中定义的变量是完全相同的类型，react-apollo 的 <Query> 组件可以直接识别使用。

• 可以把查询、突变（Mutation）按功能分类放到 src/queries、src/mutations 文件夹里，方便项目维护
• 如果需要带参数的查询，在 .graphql 文件里定义变量即可，比如：

query GetDog($id: ID!) {
  dog(id: $id) {
    id
    breed
    name
  }
}

然后在组件里通过 <Query> 的 variables 属性传值：

<Query query={GET_DOG} variables={{ id: selectedDogId }}>
  {/* 渲染逻辑 */}
</Query>

内容的提问来源于stack exchange，提问作者BugHunterUK