How do I use fragments on union in Vue.js?

Question

Does anyone have any idea how do I use fragments on unions? I've seen the documentation for React (https://www.apollographql.com/docs/react/advanced/fragments/#fragments-on-unions-and-interfaces) but not much on Vue. I have a query that returns two fragments, both with __typename.

query {
    search(queryString: "lin") {
        ... on Professor {
            __typename
            name
        }
        ... on Course { 
            __typename
            name
            moduleCode
        }
    }
}

When the vue app runs, I received the error "You're using fragments in your queries, but either don't have the addTypename: true option set in Apollo Client, or you are trying to write a fragment to the store without the __typename." This is the code from my vue app.

data() {
    return {
        result: []
    };
},
apollo: {
    // Query with parameters
    result: {
        // gql query
            query: gql'
                query search($queryString: String!) {
                    ... on Professor {
                        __typename
                        name
                    }
                    ... on Course { 
                        __typename
                        name
                        moduleCode
                    }
                }
            ',
            // Static parameters
            variables() {
               return {
                  queryString: 'lin mei'
                }
          }
    }
},

// In my apollo client options
// Override default cache
cache: new InMemoryCache(
    { addTypename: true }
}

The error messages I got are

You're using fragments in your queries, but either don't have the addTypename: true option set in Apollo Client, or you are trying to write a fragment to the store without the __typename. Please turn on the addTypename option and include __typename when writing fragments so that Apollo Client can accurately match fragments.
DEPRECATION WARNING: using fragments without __typename is unsupported behavior and will be removed in future versions of Apollo client. You should fix this and set addTypename to true now.
GraphQL error: Fragment on Professor can't be spread inside Query; GraphQL error: Fragment on Course can't be spread inside Query; GraphQL error: Variable $queryString is declared by search but not used
GraphQL error: Fragment on Professor can't be spread inside Query; GraphQL error: Fragment on Course can't be spread inside Query; GraphQL error: Variable $queryString is declared by search but not used

Is anyone able to provide an example of grabbing two fragments from a query in vue?

Apollo adds __typename automatically (addTypename is true by default). There's no need to explicitly add __typename to your query, or to set the option. — Daniel Rearden
Interesting.. After solving the issue, I could remove the options from my config and the __typename from my query without the error popping out. This is weird. No wonder I couldn't find anything online. Thank you again! — Zachery Ng

Daniel Rearden Daniel Rearden · Accepted Answer · 2019-06-22T15:52:35

Your query is not correct. You've named your operation search, but you probably meant to query this field on the root type instead. Something like:

query ($queryString: String!) {
  search(queryString: $queryString) {
    ... on Professor {
      __typename
      name
    }
    ... on Course { 
      __typename
      name
      moduleCode
    }
  }
}

Note: Because I don't know your schema, I can't say for the sure the above is a valid query either. If the server you are querying exposes a GraphiQL or GraphQL Playground interface, you should use that to verify your queries since both of those tools use schema-specific syntax highlighting.

You may wish to add an id or _id field to each fragment to ensure correct caching behavior. If neither field exists, you'll need to provide a custom dataIdFromObject function. See the docs for additional details.

How do I use fragments on union in Vue.js?

1 Answers