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?

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?

• javascript
• graphql
• apollo-client
• webpack-encore

• 1 It's really unclear what you expect import "../fragments/cardFragments.graphql" to do. A graphql file is not even valid JS code, so you must be relying on some build tool as well? – Bergi Commented May 21, 2020 at 19:17
• @Bergi, most likely graphql-tag/loader for webpack – Joseph D. Commented May 22, 2020 at 5:59
• @JosephD. Is that implied by the apollo-client tag? – Bergi Commented May 22, 2020 at 7:35
• @Bergi yes. Apollo is a graphql client. – Joseph D. Commented May 22, 2020 at 7:42
• Ok, I use webpack encore with symfony and created a custom loader: with the description form the docs - before I did this I got an error that this file format can not be loaded. So now it gets loaded. Should I register that somewere in the new ApolloClient() function? – Slowwie Commented May 23, 2020 at 8:17

1 Answer 1

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
    }
  }
`