Trying to return a single record from STRAPI in NUXT
In the playground this works
query {
organisation(id: 1) {
data {
id
attributes {
name
}
}
}
}
So I added this to my apollo/queries/organisation/organisation.gql file as follows
query Organisations ($id: ID!) {
organisation(id: $id) {
data {
id
attributes {
name
level
}
}
}
}
I am trying to test this by just passing the ID as follows
<script>
import organisationsQuery from '#/apollo/queries/organisation/organisation'
export default {
data() {
return {
loading: 0,
organisation: {
data: [],
},
}
},
apollo: {
organisations: {
prefetch: false,
query: organisationsQuery,
variables() {
return {id: 1};
},
},
},
}
</script>
I get the errors
Missing organisations attribute on result
can anyone tell me what I am doing wrong please
Related
When I try deleting the paymentMethodId from sales_channel_payment_method table I get an empty response from the API and the payload object DELETE http://localhost/api/sales-channel-payment-method/[object Object] seems empty too.
Below is my Vue js method
const { Component} = Shopware;
import template from './pau-settings-page.html.twig';
Component.register('pau-settings-page', {
template,
inject: [
'repositoryFactory'
],
metaInfo() {
return {
title: this.$createTitle()
};
},
computed: {
salesChannelPaymentMethodRepository() {
return this.repositoryFactory.create('sales_channel_payment_method');
},
},
methods: {
deletePaymentMethodIdHeadless(){
const identity = {
fieldCount: 2,
fieldsString: "05cde2abfe744bffaf47ad71f8a49270, f6dd50230aa145adb6b73801d4bcf31b",
fields: ['salesChannelId', 'paymentMethodId']
};
this.salesChannelPaymentMethodRepository.delete(
identity, Shopware.Context.api
);
},
}
});
Image of The Response
You're trying to remove a many-to-many mapping. These feature two distinct primary keys, both foreign keys of the related tables. You already have the right idea. The regular delete endpoint only works with single primary keys, hence why you get the malformed url.
To delete the mappings you may use the syncService instead.
const { Component} = Shopware;
import template from './pau-settings-page.html.twig';
Component.register('pau-settings-page', {
template,
inject: [
'repositoryFactory',
'syncService',
],
metaInfo() {
return {
title: this.$createTitle()
};
},
computed: {
salesChannelPaymentMethodRepository() {
return this.repositoryFactory.create('sales_channel_payment_method');
},
},
methods: {
deletePaymentMethodIdHeadless() {
const payload = [{
action: 'delete',
entity: 'sales_channel_payment_method',
payload: [
{
salesChannelId: '05cde2abfe744bffaf47ad71f8a49270',
paymentMethodId: 'f6dd50230aa145adb6b73801d4bcf31b'
},
],
}];
this.syncService.sync(payload, {}, { 'single-operation': 1 });
},
},
});
I'm creating a recursive method in Nuxt, can I do it?
Here is my component:
<script>
export default {
data() {
return {
items: [],
auxitems: [],
}
},
methods: {
orderRecursive(items, auxitems) {
items.data.forEach((element) => {
auxitems.push(element)
})
if (items.child.length > 0) {
this.orderRecursive(items.child, auxitems)
} else {
//
}
},
},
}
</script>
The struct items is like:
items= [
data: [{array}],
child: [{data, child}]
]
My intention is order all data in one array, then, I can show in view.
My method orderRecursive() is not working, can you tell me why?
UPDATE: the main issue seems to be that the props only get updated once. They should change when this.campaign.name becomes available.
I want to dynamically update the title and breadcrumb data fields and show them on the page. Currently page page shows undefined or null. How can I fix this?
I tried to create a computed value but it only seems to update once (after head and breadcrumb data is already showed). A method does not work since I don't have anything to trigger the method.
What is the correct way to fix this?
I am using nuxt generate to deploy the app.
export default {
components: { PageHeader },
middleware: 'authenticated',
data() {
return {
title: 'Campaigns' + this.campaignName,
breadcrumb: [
{
text: 'Campaigns',
href: '/'
},
{
text: this.campaignName,
href: '/'
}
],
campaign: ''
}
},
apollo: {
campaign: {
prefetch: true,
query: campaignQuery,
variables() {
return { id: this.$route.params.id }
}
}
},
computed: {
campaignName() {
return this.campaign && this.campaign.name
}
},
head() {
return {
title: this.title
}
}
}
</script>
Your computed property campaignName returns undefined cuz this.campaign.name is not defined
campaignName() {
if(this.campaign && this.campaign.name) return "Campaigns" + this.campaign.name;
return "default value";
}
Then you can use it directly in head
head() {
return {
title: this.campaignName
}
}
The solution was putting the data elements directly as a computer property. (so no recalculation)
export default {
components: { PageHeader },
middleware: 'authenticated',
data() {
return {}
},
apollo: {
campaign: {
prefetch: true,
query: campaignQuery,
variables() {
return { id: this.$route.params.id }
}
}
},
computed: {
title() {
return this.campaign && `Campaign: ${this.campaign.name}`
},
breadcrumb() {
return [
{
text: 'Campaign',
href: '/'
},
{
text: this.campaign && this.campaign.name,
href: '/'
}
]
}
},
head() {
return {
title: this.title
}
}
}
</script>
I have below code to get new ID using watch. Its working fine. However, I need the function to get the ID on first load as well, which is not working. Is there anything I am missing in my code?
watch: {
id: {
immediate: true,
handler(newV, oldV) {
this.id = newV;
},
},
},
mounted () {
store.watch(store.getters.getId, id => {
this.id = id;
});
},
created() {
this.userID();
},
methods: {
userID () {
console.log('this.id);
}
}
}
You can just do this:
data() {
return {id: null}
}
watch: {
'$store.getters.getId': {
immediate: true,
handler: function(newV) {
this.id = newV
},
},
}
Using a computed property is better, as your component does not 'own the id'.
computed: {
id() {
return this.$store.getters.getId
},
},
I'm trying to setup dynamic binding of firebase node based on component data, like this
export default {
name: 'data',
props: {
api: {
type: String
},
section: {
type: String
}
},
firebase: {
apiData: {
source: (console.log('source', this.api), db.ref(this.api)),
asObject: true
}
},
updated: function() {
console.log('updated', this.api, this.section)
},
created: function() {
console.log('created', this.api, this.section)
}
}
My problem is, update event is fired, but apiData source update is not fired.
What is the correct way to do this with vuefire?
After some reading of vuefire docs, I came up with watch solution
data: function(){
return {
apiData: {}
}
},
created: function() {
this.$bindAsObject('apiData', db.ref(this.api))
},
watch: {
api: function() {
this.$bindAsObject('apiData', db.ref(this.api))
}
}