apollo: Vue3 Vue Apollo composable throws error
FIX (working to me at least)
downgrade "@vue/apollo-composable": "^4.0.0-alpha.13"
to "@vue/apollo-composable": "^4.0.0-alpha.12"
Describe the bug
Calling anything from "@vue/apollo-composable"
throws error
error in ./node_modules/@vue/apollo-composable/dist/index.esm.js
Module parse failed: Unexpected token (19:103)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| var ApolloClients = Symbol("apollo-clients");
| function resolveDefaultClient(providedApolloClients, providedApolloClient) {
> const resolvedClient = providedApolloClients ? providedApolloClients.default : providedApolloClient ?? void 0;
| return resolvedClient;
| }
@ ./src/main.ts 15:0-50 50:12-20
@ multi (webpack)-dev-server/client?http://10.0.0.56:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
Issues checking in progress...
No issues found.
To Reproduce
import { createApp } from "vue"
import App from "./App.vue"
import store from "./store"
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client/core"
import { split } from "@apollo/client/core"
import { WebSocketLink } from "@apollo/client/link/ws"
import { getMainDefinition } from "@apollo/client/utilities"
import { createApolloProvider } from "@vue/apollo-option"
import { useQuery } from "@vue/apollo-composable"
interface Definintion {
kind: string
operation?: string
}
const httpLink = new HttpLink({
// You should use an absolute URL here
uri: "http://localhost:3020/graphql",
})
// Create the subscription websocket link
const wsLink = new WebSocketLink({
uri: "ws://localhost:3000/subscriptions",
options: {
reconnect: true,
},
})
// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
// split based on operation type
({ query }) => {
const { kind, operation }: Definintion = getMainDefinition(query)
return kind === "OperationDefinition" && operation === "subscription"
},
wsLink,
httpLink
)
// Create the apollo client
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache(),
connectToDevTools: true,
})
const apolloProvider = createApolloProvider({
defaultClient: apolloClient,
})
createApp(App).use(store).use(apolloProvider).mount("#app")
console.log(useQuery)
console log are simplest repdoruction, but any useQuery or other doesn’t work
Versions
"@apollo/client": "^3.3.21",
"@vue/apollo-composable": "^4.0.0-alpha.13",
"@vue/apollo-option": "^4.0.0-alpha.13",
"core-js": "^3.6.5",
"graphql": "^15.5.1",
"subscriptions-transport-ws": "^0.9.19",
"vue": "^3.1.4",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 6
- Comments: 19 (7 by maintainers)
In the meantime, another possible workaround is upgrading to Webpack 5.
Will probably lower the esbuild target to what acorn 6 understands.
I’m on Vue 3, I had
"@vue/apollo-composable": "^4.0.0-alpha.13",
installed, downgraded to"@vue/apollo-composable": "^4.0.0-alpha.12",
and problems disappeared.Fixed with downgrading
@vue/apollo-composable
to^4.0.0-alpha.13
, please update docs, it’s quite hard to figure all in vue apollo 4Anyway before I close case it’s only way to use apollo in both ways?
I mean queries in component load with Options API and use Composition API