No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. tranmani
    T
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 6
    • Best 0
    • Groups 0

    tranmani

    @tranmani

    0
    Reputation
    1
    Profile views
    6
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    tranmani Follow

    Latest posts made by tranmani

    • RE: Styling Q-Select height?

      @metalsadman thank you for the reply, I just found out about that

      posted in Framework
      T
      tranmani
    • RE: Styling Q-Select height?

      @muzammil_76 wanted to know this as well

      posted in Framework
      T
      tranmani
    • 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);
          });
      }
      
      posted in Help
      T
      tranmani
    • 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

      posted in Help
      T
      tranmani
    • 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)
      
      posted in Help
      T
      tranmani
    • RE: Custom sizing of qDate component

      I would like to have an option :width="" and :heigh="" too

      posted in Help
      T
      tranmani