I want to use some fragment:
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
}
}
Inside the console I get the error:
[GraphQL error]: Message: Unknown fragment "CardFields"., Location: [object Object], Path: undefined
Did I forgot something?
EDIT:
For the graphql fragmets to work I need to load it with webpack: Apollo docs
I did this with Webpack Encore
:
.addLoader({
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
});
module.exports = Encore.getWebpackConfig();
Before I did this - I got an error for the not loadable.graphql extention inside of Webpack Encore
.
Is there something I do not see about creating cutsom loader with Webpack Encore
?
You should import { CardFields } from "../fragments/cardFragments.js"
and then use this fragment in your mutation like this:
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}
In cardFragments.js:
import {gql} from "apollo-boost" export const CARD_FEILDS = gql ` fragment CardFields on card { id private section createdBy { id } } `
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.