link685 link686 link687 link688 link689 link690 link691 link692 link693 link694 link695 link696 link697 link698 link699 link700 link701 link702 link703 link704 link705 link706 link707 link708 link709 link710 link711 link712 link713 link714 link715 link716 link717 link718 link719 link720 link721 link722 link723 link724 link725 link726 link727 link728 link729 link730 link731 link732 link733 link734 link735 link736 link737 link738 link739 link740 link741 link742 link743 link744 link745 link746 link747 link748 link749 link750 link751 link752 link753 link754 link755 link756 link757 link758 link759 link760 link761 link762 link763 link764 link765 link766 link767 link768 link769 link770 link771 link772 link773 link774 link775 link776 link777 link778 link779 link780 link781 link782 link783 link784 link785 link786 link787 link788 link789 link790 link791 link792 link793 link794 link795 link796 link797 link798 link799 link800 link801 link802 link803 link804 link805 link806 link807 link808 link809 link810 link811 link812 link813 link814 link815 link816 link817 link818 link819 link820 link821

[Vue.js] How do I use fragments on union in Vue.js? Subscribe to RSS

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. there is 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.js app runs, I received the error “You’re using fragments in the 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.js 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 the 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?

Solution :

the query is not correct. You’ve named the 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 the 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 the 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.