How to access parameter from graphql query - vue.js

Using DatoCMS, with VueJS and gridsome. The page query looks like
<page-query>
{
DatoCms {
_site {
globalSeo {
facebookPageUrl
siteName
titleSuffix
twitterAccount
fallbackSeo {
description
title
twitterCard
image {
url
}
}
}
}
}
}
</page-query>
Below does not work to get the values from the query
export default {
metaInfo: {
title: this.$page.DatoCms._site[0].globalSeo.fallbackSeo.title,

the query needed to be adjusted and metainfo method updated

Related

Can you include an attributes based on type in GraphQL?

I have this GraphQL query which retrieved the pull requests' 3 types of timeline items from Github API. Within each type alias that I have(dismissed as an example) I'm getting all the other types but as empty objects(because I'm not querying any field in case it's not from the type I want) is there a way to exclude objects that aren't of the types I needed, maybe something like #include if(__typename = something)
query ($name: String!, $owner: String!, $pr: Int!) {
repository(name: $name, owner: $owner) {
pullRequest(number: $pr) {
timelineItems(first: 100) {
dismissed: nodes {
... on ReviewDismissedEvent {
actor {
login
}
review {
author {
login
}
}
}
}
removed: nodes {
... on ReviewRequestRemovedEvent {
actor {
login
}
requestedReviewer {
... on User {
name
login
id
}
}
}
}
added: nodes {
... on ReviewRequestedEvent {
actor {
login
}
requestedReviewer {
... on User {
name
login
id
}
}
}
}
}
}
}
}

Fetch GraphQL data based on variable

I am trying to get my query to react to a ref property.
https://v4.apollo.vuejs.org/guide-composable/query.html#variables
This wont work at all
const { result, variables } = useQuery(gql`
query {
episodes(page: $page) {
info {
pages
count
}
results {
name
}
}
}
`, {
page: 2
});
Tried this as well
setup() {
const currentPage = ref(1);
const { result } = useQuery(gql`
query {
episodes(page: ${currentPage.value}) {
info {
pages
count
}
results {
name
}
}
}
`);
function pageChange() {
currentPage.value += 1;
console.log(currentPage.value)
}
return { result, currentPage, pageChange };
},
This code below works for me when I input page number manually, but I want to pass the page number as variable, because my pagination page increases and I want the query to refresh.
const { result, loading } = useQuery(gql`
query {
episodes(page: 2) {
info {
pages
count
}
results {
name
}
}
}
`,
);
Can someone assist me?
In the link you gave query is followed by the query name.
const { result } = useQuery(gql`
query getUserById ($id: ID!) {
user (id: $id) {
id
email
}
}
`, {
id: 'abc-abc-abc',
})
You don’t specify the query name
Try this instead:
const { result, variables } = useQuery(gql`
query episodes($page: Int) {
episodes(page: $page) {
info {
pages
count
}
results {
name
}
}
}
`, {
page: 2
});
I don’t know what’s your schema looks like but I inferred that page is a Int. If it’s not change Int by the page type

Reactive query definition with Apollo and Vuejs

i try to call a query programaticly eg:
apollo: {
listItems: {
query() {
if (this.listType == "bills") {
return gql`
{
bills {
billId
order {
orderId
customer {
customerId
billingAddress {
title
}
}
}
createdAt
}
}
`;
}
},
property
update: data => data.bills || data.bills
}
}
but when i try this, i get this error:
vue.runtime.esm.js?2b0e:1888 Invariant Violation: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag?
I have follow the description in the docs:
https://apollo.vuejs.org/guide/apollo/queries.html#reactive-query-definition
Best regards and thanks four help!
Stay healthy
You cannot wrap apollo query in an if statement. You can use skip instead. In your example it would be like this:
listItems: {
query() {
return gql`
{
bills {
billId
order {
orderId
customer {
customerId
billingAddress {
title
}
}
}
createdAt
}
}`
},
skip() {
return this.listType != "bills"
}
}

Gridsome Graphql filter variable

Im trying to query a collection and filter it depends on the $path var
but it either returns empty or throwing an error
<page-query>
query Gallery($path: String!){
photos : allPhotos(filter: { nameFromGalleries: { contains: [$path]}}){
edges{
node{
nameFromGalleries
galleries
attachments{
thumbnails{
full{
url
}
}
}
}
}
}
</page-query>
for another query on the same page it works just fine
gallery : gallery(path: $path){
title
children{
name
path
}
}

validate nested object array with vuelidate

I want to validate an object array inside nested object array
FormData:Array[8]
0:Object
group:Object
id:1
cards:Array[8]
0:Object
id:2253
service:Object
name:"Service Name"
...
I need to validate from service only the name
I try with something like this, but no success...
validations() {
return {
FormData: {
$each: {
group: {
cards: {
$each: {
service: {
name: {
required
}
}
}
}
}
}
}
}
}
Seems like the $each is not working as i want to, what im doing wrong how can i get to correct nested object with $each ?