Provide DefaultApolloClient from Apollo Composable to your Vue 3 App
In order to use the useQuery composable to fetch data, you need to first import DefaultApolloClient from @vue/apollo-composable
Then in your createApp you need to provide the DefaultApolloClient to your app inside a setup function, then all of the child components will have access to it.
Kevin Cunningham: [0:00] There's a composable developed by the Apollo community specifically for using GraphQL. Let's install that. Npm install @vue/apollo-composable. Great.
[0:14] Back at our main.js file, where we previously defined our Apollo Client, we're going to import the DefaultApolloClient from @vue/apollo-composable. I'm going to need to rewrite how our app is being created here.
[0:37] Instead of just passing in the render component, the createApp function can also take an options object. Within this options object, I can use the setup function, which gives me access to the composable API. Through this, I am going to provide the DefaultApolloClient, and, as an option, I'm going to pass in my Apollo Client.
[1:02] If you've come from React, provide is the same as context. It allows me to provide functionality to every child component. Since I'm doing this at the top level of my application, this DefaultApolloClient is going to be available at every point of my application.
[1:19] I need to import provide from Vue. When I use the options object with createApp, I also need to pass a render property. This render property takes an arrow function. We want Vue to render our App component here, but we need to wrap that in the h function, which we can import from Vue.
[1:41] That h stands for hyperscript. It's a riff of HTML and basically stands for script that generates HTML structures. We're saying generate HTML structures from our App Vue component.
[1:54] Save that and restart our server so application is running as normal and our DefaultApolloClient is available at every level of our application.