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"
}
}
Related
I would like to achieve a request in which I can filter my results with where clauses and then apply others where but on the result of the first where
return await UserModel.query()
.withGraphFetched('roles')
.modify(function(queryBuilder) {
if (accessControlFilters.agency_id) {
queryBuilder.orWhere('agency_id', accessControlFilters.agency_id)
}
if (accessControlFilters.third_party.length) {
queryBuilder.orWhereIn('third_party_id', accessControlFilters.third_party)
}
if (accessControlFilters.corporation.length) {
queryBuilder.orWhereIn('corporation_id', accessControlFilters.corporation)
}
})
.modify(function(queryBuilder) {
if (Array.isArray(userFilters.corporation) && userFilters.corporation.length) {
queryBuilder.orWhereIn('corporation_id', userFilters.corporation)
}
if (Array.isArray(userFilters.third_party) && userFilters.third_party.length) {
queryBuilder.orWhereIn('third_party_id', userFilters.third_party)
}
})
.limit(limit)
.offset(offset)
.debug()
But there it just concatenates my first modifier with the second :(
DO you have any clue how i can achieve this ?
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
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
I am using graphql with express and mongoose. for some reasons, I am getting null value for embedded documents. tried both async/await and promise.
Schema.JS
const typeDefs = `
type Patient{
name:String
}
type Order {
_id: ID!
orderName: String!
orderDate: Int,
patient:Patient
}
type Query {
allOrders: [Order]
}
`;
module.exports.schema = makeExecutableSchema({
typeDefs,
resolvers
});
resolver.JS
module.exports.resolvers = {
Query: {
async allOrders() {
return await db.cpoeDataModel.CpoeOrder.find();
}
},
Order: {
patient: async (order) => {
console.log("patient Id##", order.patientId);
return await db.domainModel.Patient.findById(order.patientId);
}
}
};
the query:
{
allOrders {
orderName,
patient {
name
}
}
}
result:
{
"allOrders": [
{
"orderName": "order1",
"patient": null
},
{
"orderName": "order2",
"patient": null
}]
}
expected result
{
"allOrders": [
{
"orderName": "order1",
"patient": {
"name":"xyz"
}
},
{
"orderName": "order2",
"patient": {
"name":"xyz"
}
}]
}
the problem was with my order collection not with code. there was some reference of patient Ids that does not exist anymore. that's why getting null values that are acceptable. I was confused just bcoz it's on the top of results.
I have a problem.
I am posting a category id with http post. status is returning a data that is true. I want to return with the value count variable from the back. But count does not go back. Return in function does not work. the value in the function does not return from the outside.
category-index -> View
<td>{{category.id | count}}</td>
Controller File
/**
* #Access(admin=true)
* #Route(methods="POST")
* #Request({"id": "integer"}, csrf=true)
*/
public function countAction($id){
return ['status' => 'yes'];
}
Vue File
filters: {
count: function(data){
var count = '';
this.$http.post('/admin/api/dpnblog/category/count' , {id:data} , function(success){
count = success.status;
}).catch(function(error){
console.log('error')
})
return count;
}
}
But not working :(
Thank you guys.
Note: Since you're using <td> it implies that you have a whole table of these; you might want to consider getting them all at once to reduce the amount of back-end calls.
Filters are meant for simple in-place string modifications like formatting etc.
Consider using a method to fetch this instead.
template
<td>{{ categoryCount }}</td>
script
data() {
return {
categoryCount: ''
}
},
created() {
this.categoryCount = this.fetchCategoryCount()
},
methods: {
async fetchCategoryCount() {
try {
const response = await this.$http.post('/admin/api/dpnblog/category/count', {id: this.category.id})
return response.status;
} catch(error) {
console.error('error')
}
}
}
view
<td>{{count}}</td>
vue
data() {
return {
count: '',
}
},
mounted() {
// or in any other Controller, and set your id this function
this.countFunc()
},
methods: {
countFunc: function(data) {
this.$http
.post('/admin/api/dpnblog/category/count', { id: data }, function(
success,
) {
// update view
this.count = success.status
})
.catch(function(error) {
console.log('error')
})
},
},