@metalsadman thank you for the reply, I just found out about that
Latest posts made by tranmani
-
RE: Styling Q-Select height?
-
RE: Import GraphQL boot file to use in store action
@rhscjohn Thank you very much, I used your code as a reference and now it works, my boot file stays the same but my action file is now like this:
import { apolloProvider } from "../../boot/apollo"; import gql from "graphql-tag"; const gqlClient = apolloProvider.defaultClient; export function getLoggedInUserInfo({ commit }, payload) { gqlClient .query({ query: gql` query getUserByTokenList($token: String!) { getUserByToken(token: $token) { email firstname lastname bio note role coach club organization position players } } `, variables: { token: payload } }) .then(data => { commit("updateUser", data.data.getUserByToken); }); }
-
RE: Import GraphQL boot file to use in store action
@dobbel said in Import GraphQL boot file to use in store action:
@tranmani said in Import GraphQL boot file to use in store action:
console
What is the output of
console.log(apolloProvider)
in the not store compared to the output in a vue file?console log for actions file:
actions.js?439d:5 ApolloProvider {clients: {…}, defaultClient: ApolloClient, defaultOptions: undefined, watchLoading: undefined, errorHandler: ƒ, …} -> clients: {defaultClient: ApolloClient} defaultClient: ApolloClient {defaultOptions: {…}, resetStoreCallbacks: Array(0), clearStoreCallbacks: Array(0), link: WebSocketLink, cache: InMemoryCache, …} defaultOptions: undefined errorHandler: errorHandler({ graphQLErrors, networkError }) { if (graphQLErrors) { graphQLErrors.map(({ message, locations, path }) => {…} prefetch: undefined watchLoading: undefined __proto__: Object
console log of this.$apollo in .vue file
DollarApollo {_apolloSubscriptions: Array(0), _watchers: Array(0), vm: VueComponent, queries: {…}, subscriptions: {…}, …} -> client: undefined error: undefined loadingKey: undefined queries: {} subscriptions: {} vm: VueComponent {_uid: 59, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} _apolloSubscriptions: [] _watchers: [] data: (...) loading: (...) provider: (...) __proto__: Object
@anli said in Import GraphQL boot file to use in store action:
Do you really need vuex? vue-apollo comes with a caching system and using vuex is not needed and may be overhead. If you use chrome browser you can add the apollo extension to watch the cache. You can read https://apollo.vuejs.org/guide/local-state.html to find out more (att: v3 documentation, maybe you’re using one of the three v4 apis (Option API, Composition API, Component API) - setup is nearly the same (https://v4.apollo.vuejs.org/))
I will have a look in to that
-
Import GraphQL boot file to use in store action
Hi, I am using GraphQL, in Vue component it works fine with this.$apollo but I can’t find a way to use it in non vue component file.
Boot file:
const apolloProvider = createApolloClient(); export default ({ app, Vue, ssrContext }) => { Vue.use(VueApollo); app.provide = { $apolloProvider: apolloProvider }; if (ssrContext) { ssrContext.rendered = () => { ssrContext.apolloState = JSON.stringify( apolloProvider.defaultClient.extract() ); }; } return apolloProvider; }; export { apolloProvider };
Store action:
import LoginRes from "../../graphql/login"; import { apolloProvider } from "../../boot/apollo"; export function getLoggedInUserInfo({ commit, payload }) { console.log(apolloProvider); apolloProvider .query({ query: LoginRes.getUserByToken, variables: { token: payload } }) .then(data => { commit("updateUser", data.data.getUserByToken); }); }
Error in console:
client-entry.js?2f39:105 [Quasar] boot error: TypeError: _boot_apollo__WEBPACK_IMPORTED_MODULE_1__.apolloProvider.query is not a function at Store.getLoggedInUserInfo (actions.js?439d:6) at Array.wrappedActionHandler (vuex.esm.js?94e4:847) at Store.dispatch (vuex.esm.js?94e4:512) at Store.boundDispatch [as dispatch] (vuex.esm.js?94e4:402) at Array.__webpack_exports__.default (apollo.js?c149:72) at start (client-entry.js?2f39:88)
-
RE: Custom sizing of qDate component
I would like to have an option :width="" and :heigh="" too