Estoy usando Nuxt en modo SPA y tengo una estructura de página como esta:
pages ... - users/ - - index - - new - - update/ - - - _id ...Tengo una página de usuarios con una lista de ellos y 'subpágina' - nueva.
En mi página users/index , busco a mis usuarios en asyncData Hook de esta manera:
async asyncData({ app: { apolloProvider }, store: { commit, dispatch } }) { const { data: { getAllUsers: { success, users, message } }, } = await apolloProvider.defaultClient.query({ query: getAllUsersGQL, }) if(success) { await commit('user/setUsers', users, { root: true }) } else { dispatch('snackbar/notify', { message: message, type: 'error' }, { root: true }) } }, Parece funcionar como debería. Pero cuando voy a mi página de users/new , completo el formulario y lo envío, actualizo la tienda y redirijo a mis users/index , encuentro un comportamiento un poco interesante.
El problema aquí es que no tengo un estado recién actualizado, sino algo en caché o un estado anterior. Hasta ahora puedo hacer que funcione con location.replace . Cuando la página recarga tengo un estado preciso y actualizado.
Así es como manejo la redirección en users/new página:
async save() { if(this.$refs.create.validate()) { this.loading = true delete this.form.confirm await this.createUserStore(this.form) this.$router.push( this.localeLocation({ name: 'users', }) ) this.loading = false this.$refs.create.reset() } },y así voy refrescando mi estado en Vuex:
export const mutations = { updateUsers: (state, payload) => { state.users = [...state.users, payload].sort((a,b) => a.createdAt - b.createdAt) }, }Así es como estoy pasando datos:
computed: { ...mapGetters({ storeUsers: 'user/getUsers', storeGetMe: 'auth/getMe', }), }, <v-data-table :headers="headers" :items="storeUsers" :search="search" item-key="id" class="elevation-1" dense > </v-data-table>Ya intenté listar elementos usando v-for y tampoco funciona. Y cuando el estado de console.log obtengo todos los elementos. Funciona como deberia.
¿Cuál puede ser el problema de que no está actualizando la vista?
Si alguien alguna vez se ha enfrentado a este tipo de comportamiento, agradecería cualquier pista.
Esto probablemente se deba al hecho de que Apollo tiene su propio caché y que primero busca el caché, ya que el valor predeterminado es cache-first .
Prueba este
await apolloProvider.defaultClient.query({ query: getAllUsersGQL, fetchPolicy: 'network-only', })Este es un ejemplo de una consulta GQL dinámica que escribí anteriormente
test.gql.js
import { gql } from 'graphql-tag' import { constantCase, pascalCase } from 'change-case' export const queryCompanyBenefitInfo = ({ benefitType, needCifEligibility = false, needActiveOnWeekend = false, needCompanyContribution = false, needAutoRenewed = false, needUnitValue = false, }) => { return gql` query { CompanyBenefit { oneOfType(benefitType: ${constantCase(benefitType)}) { ... on Company${pascalCase(benefitType)}Benefit { ${needCifEligibility ? 'cifEligibility' : ''} ${needActiveOnWeekend ? 'activeOnWeekend' : ''} ${needCompanyContribution ? 'companyContribution' : ''} ${needAutoRenewed ? 'autoRenewed' : ''} ${ needUnitValue ? `unitValue { value }` : '' } } } } } ` }Y llámalo de esta manera
import { testQuery } from '~/apollo/queries/test.gql.js' ... await this.app.apolloProvider.defaultClient.query({ query: testQuery({ benefitType: 'care', needCifEligibility: true }), fetchPolicy: 'network-only', errorPolicy: 'all', })