I am trying to query with the Prismic predicate.fulltext using Vuejs
this is the first time am using the predicate but the documentation about what the fulltext predicate needs seems to be confusing. Here is my code.
async searchByQuery(query) {
const fullTextResult = await this.$prismic.client.get({
predicates: this.$prismic.predicate.not("articles.article_title", query),
});
console.log(fullTextResult);
},
where articles is my custom type and article_title is a field in my custom type.
That is what I understood from the documentation on how to do it but then I get an unexpected error
I would like a clarification on why this does not work and what the documentation really mean.
Am Using Vue3 by the way and that means am using the updated prismicio/client
You are pretty close!
Using Vue 3, you're looking at something like that:
export default {
methods: {
async searchByQuery(query) {
const fullTextResult = await this.$prismic.client.get({
predicates:
this.$prismic.predicate.fulltext(
"my.articles.article_title",
query
)
});
console.log(fullTextResult);
}
}
};
Basically, you need to prefix articles.article_title with my. to indicate it's a field on one of your document type, and change the predicate you're using to precidate.fulltext instead of predicate.not (assuming you want to run a fulltext search)
Let me know if that helps :)
Related
So I have a search created with elasticsearch request within Vuejs that runs great and all works but as soon as I add any size/from parameters into the query I get the error "Options contains invalid key: size" but I'm unsure of where it's going wrong. I have tried changing it to a get and I have tried rebuilding the query in several different ways but keep getting the same result.
let buildURL = 'https://blahblahblah.com/search';
const article = { query: query.query,
size: 50
};
const headers = {
'Authorization':'$token',
'Content-Type':'application/json',
};
let querydata = await $axios.$post(buildURL, article, { headers });
Options contains invalid key is not an error coming out of Elasticsearch directly. The component you're interacting with is called App Search and is a search engine layer on top of Elasticsearch.
So, all you need to change is the following:
const article = { query: query.query,
page: { size: 50 } <---- change this line
};
That should do the trick
passing of param size index option not define
Or there might be another option to get size , might be limit 0,50
Share interface file
I'm attempting to set data fields provided by an array based on the Vue Router query. For example, when someone lands on my website using example.com/?location=texas, I want to set the location data by an array.
An example the array:
locations {
{
slug: "texas",
tagline: "Welcome to Texas",
}, {
slug: "california",
tagline: "Welcome to California",
}
}
I know this should be done using a computed property, however I am unable to get anything functioning. I've tried simple tests like if (this.slug.location === "texas"), and I cannot get the location data to populate. I would also like to provide default data in case there are no route matches.
Any help is extremely appreciated!
Edit:
I can accomplish this in a very manual way. Right now, I'm setting the query in data by the following:
slug: this.$route.query.location
I can display specific text by doing something like:
h3(v-if="slug === 'texas'") This will show for texas
h3(v-else-if="slug === 'california'") This will show for California
h3(v-else) This is default
The issue with this approach is there are various elements I need to customize depending on the slug. Is there any way I can create an array, and move whichever array matches a key in an array to the data??
You should be able to access a query param using the following (link to Vue Router documentation):
this.$route.query.location
So based on what you listed I would do something like...
export default {
computed: {
displayBasedOnLocationQueryParam() {
switch(this.$route.query.location) {
case 'texas':
return 'Welcome to Texas'
default:
return 'hello there, generic person'
}
}
}
}
Note that I'm not using your array explicitly there. The switch statement can be the sole source of that logic, if need be.
Similar questions in SO are not SSR (Server Side Rendering) specific and their answers do not apply in my case.
I'm using #nuxtjs/apollo which is based on vue-cli-plugin-apollo and vue-apollo
I have two queries X and Y. A variable of Y is taken from result of X. I want to execute both queries on server side. How to achieve that?
Simplified example below is closest I can get. However query Y is executed at client side.
{
apollo: {
X: {
query: X
},
Y: {
query: Y,
variables() {
return { id: this.X.someField };
},
skip() {
return !this.X; // Skip until X have some result.
}
},
}
}
Basically I want:
Execute query X on server and get result.
Execute query Y on server with a variable from result of query X.
Many thanks,
I had the same issue and finally found a solution after trying many options.
Query X and Y can be run sequentially on server-side by using parent and child Vue components.
Run query X in the parent component.
Pass the result of X to the child component via props.
Run query Y in the child component with variables from props.
As per #y15e's answer, it works to run the dependent query in a child component using the result passed from the parent via a prop, as long as you handle the state before X exists. Just using a computed property and a ternary to pass an empty string worked for me.
In the parent...
{
apollo: {
X: {
query: X
}
}
}
Child component
{
props: ['X'],
computed: {
Xvalue: function() {
return (this.X ? this.X : '');
}
},
apollo: {
Y: {
query: Y,
variables() {
return { id: this.Xvalue };
},
skip() {
return !this.Xvalue;
}
},
}
}
Normally when you have a query that depends on the result of another query, you utilize the skip option to prevent requesting the second query until the first query resolves. However, skipping the query means it won't be prefetched. I think the only way you can do what you're trying to do is to utilize asyncData instead of relying on smart queries -- you'd have to call the query method directly on an instance of ApolloClient. You might be able to do that just for the first query and then use the resulting data as a variable value in your second query but off-hand, I don't know if asyncData is fetched before your queries are prefetched.
As an aside, if you are querying against your own server, you might consider updating your API. Typically cases where you need to have two queries chained like this are indicative of poor schema design. For example, I shouldn't have to fetch a user, get their ID and then fetch the user's posts by the ID -- I should be able to fetch the entire graph of data in one query (the user and their posts).
I am running into the same issue.
The reason why it happens because there is no reactive in SSR. but the whole apollo client composition APIs are designed in reactive way.
that what it works.
to deal with this, we can get the apollo client and query the result in async way, so that we can await the result in SSR.
const apolloClient = useApolloClient()
const result = await apolloClient.client.query({
query: QueryDocument,
})
or await the result before the second query execute.
await until(firstQueryResult).toBeTruthy()
This was originally posted on discuss.emberjs.com. See:
http://discuss.emberjs.com/t/what-is-the-proper-use-of-store-filter-store-find-for-infinite-scrolling/3798/2
but that site seems to get worse and worse as far as quality of content these days so I'm hoping StackOverflow can rescue me.
Intent: Build a page in ember with ember-data implementing infinite scrolling.
Background Knowledge: Based on the emberjs.com api docs on ember-data, specifically the store.filter and store.find methods ( see: http://emberjs.com/api/data/classes/DS.Store.html#method_filter ) I should be able to set the model hook of a route to the promise of a store filter operation. The response of the promise should be a filtered record array which is a an array of items from the store filtered by a filter function which is suppose to be constantly updated whenever new items are pushed into the store. By combining this with the store.find method which will push items into the store, the filteredRecordArray should automatically update with the new items thus updating the model and resulting in new items showing on the page.
For instance, assume we have a Questions Route, Controller and a model of type Question.
App.QuestionsRoute = Ember.Route.extend({
model: function (urlParams) {
return this.get('store').filter('question', function (q) {
return true;
});
}
});
Then we have a controller with some method that will call store.find, this could be triggered by some event/action whether it be detecting scroll events or the user explicitly clicking to load more, regardless this method would be called to load more questions.
Example:
App.QuestionsController = Ember.ArrayController.extend({
...
loadMore: function (offset) {
return this.get('store').find('question', { skip: currentOffset});
}
...
});
And the template to render the items:
...
{{#each question in controller}}
{{question.title}}
{{/each}}
...
Notice, that with this method we do NOT have to add a function to the store.find promise which explicitly calls this.get('model').pushObjects(questions); In fact, trying to do that once you have already returned a filter record array to the model does not work. Either we manage the content of the model manually, or we let ember-data do the work and I would very much like to let Ember-data do the work.
This is is a very clean API; however, it does not seem to work they way I've written it. Based on the documentation I cannot see anything wrong.
Using the Ember-Inspector tool from chrome I can see that the new questions from the second find call are loaded into the store under the 'question' type but the page does not refresh until I change routes and come back. It seems like the is simply a problem with observers, which made me think that this would be a bug in Ember-Data, but I didn't want to jump to conclusions like that until I asked to see if I'm using Ember-Data as intended.
If someone doesn't know exactly what is wrong but knows how to use store.push/pushMany to recreate this scenario in a jsbin that would also help too. I'm just not familiar with how to use the lower level methods on the store.
Help is much appreciated.
I just made this pattern work for myself, but in the "traditional" way, i.e. without using store.filter().
I managed the "loadMore" part in the router itself :
actions: {
loadMore: function () {
var model = this.controller.get('model'), route = this;
if (!this.get('loading')) {
this.set('loading', true);
this.store.find('question', {offset: model.get('length')}).then(function (records) {
model.addObjects(records);
route.set('loading', false);
});
}
}
}
Since you already tried the traditional way (from what I see in your post on discuss), it seems that the key part is to use addObjects() instead of pushObjects() as you did.
For the records, here is the relevant part of my view to trigger the loadMore action:
didInsertElement: function() {
var controller = this.get('controller');
$(window).on('scroll', function() {
if ($(window).scrollTop() > $(document).height() - ($(window).height()*2)) {
controller.send('loadMore');
}
});
},
willDestroyElement: function() {
$(window).off('scroll');
}
I am now looking to move the loading property to the controller so that I get a nice loader for the user.
Is there any way to find an "item" inside an Dojo Store (Version 1.1!!).
The Format of the Json Data is like: name/id.
So far if tryed it with:
var storeItem = this.myFilteringSelect.store.fetch({query: {name: "Alpha"}});
But fetch does not return the item? Btw. i need the "ID" of the Item to set an default value for the filteringSelect (but the id can change from time to time...)
Let me preface my answer in that I can't speak to 1.1 specifically. But in 1.6...
store.fetch is coded in an asynchronous manner. It does not return the item. You must provide a callback that will iterate over the items returned from the query.
store.fetch({
query: {/*queryParams*/},
onComplete: function(items, findResult){
dojo.forEach(items, function(item){
// work with your item
}
}
});
https://dojotoolkit.org/reference-guide/1.6/dojo/data/api/Read.html#dojo-data-api-read
I don't believe this API had changed much over time, so if it is present in 1.1, then I think this should help.