[GraphQL 错误]：消息：未知片段

Question

我想使用一些片段：

import {gql} from "apollo-boost";
import "../fragments/cardFragments.graphql"

export const ADD_CARD = gql`
    mutation AddCard {
        createCard(input: {
            private: true,
            section: "school",
            createdBy: "api/users/1"
        }) {
            card {
                ...CardFields
            }
        }
    }
`;

export default {ADD_CARD}

cardFragments.graphql:

fragment CardFields on card {
    id
    private
    section
    createdBy {
        id
    }
}

在控制台中我收到错误：

[GraphQL error]: Message: Unknown fragment "CardFields"., Location: [object Object], Path: undefined

我是不是忘记了什么？

编辑：

为了让 graphql fragmets 工作，我需要用 webpack 加载它：Apollo docs

我用 Webpack Encore 做了这个：

.addLoader({
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader',
});

module.exports = Encore.getWebpackConfig();

在执行此操作之前 - 我在 Webpack Encore 中收到无法加载的 .graphql 扩展名的错误。

关于使用 Webpack Encore 创建 cutsom 加载程序，有什么我没有看到的吗？

Answer 1

你应该 import { CardFields } from "../fragments/cardFragments.js" 然后像这样在你的突变中使用这个片段：

import {gql} from "apollo-boost";
import { CARD_FEILDS } from "../fragments/cardFragments.js"

export const ADD_CARD = gql`
    mutation AddCard {
        createCard(input: {
            private: true,
            section: "school",
            createdBy: "api/users/1"
        }) {
            card {
                ...CardFields
            }
        }
    }
    ${CARD_FEILDS}
`;

export default {ADD_CARD}

在cardFragments.js中：

import {gql} from "apollo-boost"
export const CARD_FEILDS = gql `
  fragment CardFields on card {
    id
    private
    section
    createdBy {
        id
    }
  }
`

[GraphQL 错误]：消息：未知片段

[GraphQL error]: Message: Unknown fragment

javascript

graphql

apollo-client

webpack-encore