travis-r6s / gridsome-plugin-flexsearch Goto Github PK
View Code? Open in Web Editor NEWAdd lightning fast search to Gridsome with FlexSearch
Add lightning fast search to Gridsome with FlexSearch
Hi there @thetre97 ,
First of all thanks for your lib its been quite handy! 😄
I was curious about the JSON compression you added to the lib recently, and did some testing of my own - and as it turns out, the raw json file is smaller - but after gzipping its actually bigger!
Makes sense since GZIP does well with repetitive data. And since gridsome usually gets deployed to a CDN, gzip is a given.
Here's what I found in my testing with my dataset, a pretty standard blog entries of dataset.
raw | gzipped | |||
---|---|---|---|---|
compressed-json | 131kb | 31kb | ||
json | 233kb | 26kb |
So knowing that and also that the client and server both need to load compressed-json
and the overhead of decompressing the blob in the client for every search, I think it may be better to not do this. Or maybe it should be configurable via a setting, but I dont think it should be the default.
thoughts?
TypeError: Object.fromEntries is not a function
at collectionStore.data.map.node (/home/kimery/test/my-project/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:72:26)
at Array.map (<anonymous>)
at getStoreCollection (/home/kimery/test/my-project/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:56:35)
at collection (/home/kimery/test/my-project/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:122:14)
at /home/kimery/test/my-project/node_modules/gridsome-plugin-flexsearch/node_modules/p-map/index.js:57:28
Hello, I'm having some trouble with setting up search fields. Here is my markdown file frontmatter:
---
path: "/new-website"
date: 2019-08-04
title: "New Website"
author: "Lindsay Wardell"
tags:
- Web Development
- Personal
---
I set up my configuration as follows:
{
use: 'gridsome-plugin-flexsearch',
options: {
collections: [
{
typeName: 'Post',
indexName: 'Post',
fields: ['title', 'content', 'tags', 'author', 'date']
}
],
searchFields: ['title', 'tags']
}
}
The field 'tags' is an array in the Markdown files. When I search for a tag, it does not appear to filter by that tag, only by the title. Does this plugin support arrays as a searchField?
Hi,
Thanks for the awesome plugin.
I have a use case where the search component is shared in multiple pages (e.g. /docs/my-help-article-1...)
I checked https://github.com/thetre97/gridsome-plugin-flexsearch/blob/main/gridsome.client.js#L67 and it seems like the autoFetch
is being "hard checked".
So my suggestion is to support a callback function or regex or prefix (e.g. "/docs/*").
Cheers,
First off, thanks for the plugin! I'm in the process of implementing search for a site that uses Sanity as a headless CMS and Gridsome for SSG.
I'm getting the following error when running gridsome develop
:
Serving search index
TypeError: app.get is not a function
at CreateSearchIndex.api.configureServer.app (/Users/zack/Sites/sanity/sanity-gridsome-blog/web/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:39:9)
Here are the contents of package.json with the versions of Gridsome and the Flexsearch plugin:
{
"name": "sanity-gridsome-web",
"private": true,
"scripts": {
"build": "gridsome build",
"dev": "gridsome develop",
"explore": "gridsome explore"
},
"dependencies": {
"@gridsome/plugin-google-analytics": "^0.1.0",
"@sanity/image-url": "^0.140.15",
"dotenv": "^8.1.0",
"gridsome": "^0.7.1",
"gridsome-plugin-flexsearch": "^0.1.9",
"gridsome-source-sanity": "^1.0.1",
"sanity-blocks-vue-component": "^0.1.0"
},
"devDependencies": {
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0"
}
}
And finally, here's the config of my collection as well as the Flexsearch plugin in gridsome.config.js:
module.exports = {
...
plugins: [
// Sanity source plugin config
{
use: 'gridsome-source-sanity',
options: {
...clientConfig.sanity,
typeName: 'Sanity',
token: process.env.SANITY_TOKEN,
overlayDrafts: !isProd,
watchMode: !isProd
}
},
// Flexsearch plugin config
{
use: 'gridsome-plugin-flexsearch',
options: {
collections: [
{
typeName: 'Sanity',
indexName: 'Sanity',
fields: ['title']
}
],
searchFields: ['title']
}
}
...
]
}
Any info on what may be causing this would be greatly appreciated. Thanks again!
Hey @thetre97,
I am manually fetching the flexsearch.json, how you recommended to me in #37
After upgrading to the newest version unfortunately I get the following error:
When setting autoFetch to true the search is working as expected. Do I have to change anything in the new version to manually load the flexsearch.json?
async mounted() {
const searchIndex = await fetch(`/flexsearch.json`)
.then(r => r.json())
.then(j => cjson.decompress(j));
this.$search.import(searchIndex, { serialize: false });
},
Gridsome is also upgraded to the newest version. (0.7.17)
Thank you very much for your help.
Best regards
Chris
I am trying to configure the plugin in my project Repo ramsesgarate.com.
I just installed the plugin, set it up following the prompts:
{
use: 'gridsome-plugin-flexsearch',
options: {
flexsearch: {
cache: true,
profile: 'match'
},
searchFields: ['title', 'tags'],
collections: [{
typeName: 'Post',
indexName: 'Post',
fields: ['title', 'description']
}, ]
}
}
And I'm testing it in a view like so:
<template>
<Layout>
<input
id="search"
v-model="searchTerm"
class="input"
type="text"
placeholder="Search">
{{ searchResults }}
</Layout>
</template>
<script>
export default {
data: () => ({
searchTerm: ''
}),
computed: {
searchResults () {
const searchTerm = this.searchTerm
if (searchTerm.length < 3) return []
return this.$search.search({ query: searchTerm, limit: 5 })
},
test() {
return this.$search();
}
},
watch: {
$route (to, from) {
this.searchTerm = ''
}
}
}
</script>
When I run the gridsome develop
command I get the following error:
TypeError: Object.fromEntries is not a function
at collectionStore.data.map.node (C:\Users\AWTO\projects\ramsesgarate\node_modules\gridsome-plugin-flexsearch\gridsome.server.js:72:26)
at Array.map (<anonymous>)
at getStoreCollection (C:\Users\AWTO\projects\ramsesgarate\node_modules\gridsome-plugin-flexsearch\gridsome.server.js:56:35)
at collection (C:\Users\AWTO\projects\ramsesgarate\node_modules\gridsome-plugin-flexsearch\gridsome.server.js:122:14)
at C:\Users\AWTO\projects\ramsesgarate\node_modules\gridsome-plugin-flexsearch\node_modules\p-map\index.js:57:28
I can't find what the error may be, could you guide me, thanks.
I just finished attempting the fix suggested in this recently closed issue, but after rebuilding Flexsearch's index I'm still unable to search for values contained in an array of tags.
To further complicate things the body copy of each post is returned as a value in an array of objects nested within another array of objects. Is it currently possible to index and search nested content?
To clarify things a little, here's an example of one of the posts I'd be searching for (this output was returned by searchResults
):
[
{
"index": "SanityPost",
"id": "ddaf3c38-4159-4470-9da8-33e3ead2ec9f",
"path": "/my-first-introduction-to-portable-text/",
"body": [
{
"_key": "8f3691f42e1b",
"_type": "block",
"children": [
{
"_key": "8f3691f42e1b0",
"_type": "span",
"marks": [],
"text": ""
},
{
"_key": "8f3691f42e1b1",
"_type": "span",
"marks": [
"217576d2be65"
],
"text": "Portable Text"
},
{
"_key": "8f3691f42e1b2",
"_type": "span",
"marks": [],
"text": " is a JSON based rich text specification for modern content editing platforms. The rich text editor in Sanity Studio uses it and lets me embed data objects both inline and inbetween my text blocks. I can even have references in them so that my content backend warns me if I try to delete content that is linked to. I can also customize the editor with "
},
{
"_key": "8f3691f42e1b3",
"_type": "span",
"marks": [
"fc7e797c1dd6"
],
"text": "React components and paste-handling overrides"
},
{
"_key": "8f3691f42e1b4",
"_type": "span",
"marks": [],
"text": ". I can even "
},
{
"_key": "8f3691f42e1b5",
"_type": "span",
"marks": [
"2c6896e3acbc"
],
"text": "make it speak"
},
{
"_key": "8f3691f42e1b6",
"_type": "span",
"marks": [],
"text": "!"
}
],
"markDefs": [
{
"_key": "217576d2be65",
"_type": "link",
"href": "https://www.portabletext.org"
},
{
"_key": "fc7e797c1dd6",
"_type": "link",
"href": "https://www.sanity.io/docs/what-you-need-to-know-about-block-text/customization"
},
{
"_key": "2c6896e3acbc",
"_type": "link",
"href": "https://www.smashingmagazine.com/2019/03/sanity-portabletext-speech-synthesis/"
}
],
"style": "normal"
}
],
"tags": [
"Portable Text",
"JSON",
"Rich Text",
"RTE"
],
"title": "My First Introduction to Portable Text"
}
]
There appears to be some documentation on this in the Flexsearch docs, but I'm not sure how this might translate to the Gridsome plugin:
I have run gridsome build
and gridsome develop
locally and the search is working fine for me. However, when I go to deploy my site, I get the error "TypeError: Object.fromEntries is not a function" in my Netlify console.
Here's a link to my website's configuration https://github.com/Michael-Brooks/michaelbrooks.co.uk/blob/master/gridsome.config.js
And here's more info to the error from the Netlify console.
4:46:28 PM: TypeError: Object.fromEntries is not a function
4:46:28 PM: at collectionStore.data.map.node (/opt/build/repo/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:72:26)
4:46:28 PM: at Array.map (<anonymous>)
4:46:28 PM: at getStoreCollection (/opt/build/repo/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:56:35)
4:46:28 PM: at collection (/opt/build/repo/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:122:14)
4:46:28 PM: at /opt/build/repo/node_modules/gridsome-plugin-flexsearch/node_modules/p-map/index.js:57:28
4:46:28 PM: npm ERR! code ELIFECYCLE
4:46:28 PM: npm ERR! errno 1
4:46:28 PM: npm ERR! gridsome@ build: `gridsome build`
4:46:28 PM: npm ERR! Exit status 1
I would be grateful for any help.
Hello,
just wanted to test this plugin to see if it fits my needs but got this nice stack trace as soon as I add it to gridsome.config:
Initializing plugins...
Load sources - 0.04s
Create GraphQL schema - 0.08s
Create pages and templates - 0.12s
Generate temporary code - 0.05s
(node:4305) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'constructor' of undefined
at F (/Users/renepardon/.../node_modules/flexsearch/dist/flexsearch.node.js:14:485)
at w.s (/Users/renepardon/.../node_modules/flexsearch/dist/flexsearch.node.js:23:225)
at w.s (/Users/renepardon/.../node_modules/flexsearch/dist/flexsearch.node.js:23:279)
at w.add (/Users/renepardon/.../node_modules/flexsearch/dist/flexsearch.node.js:21:84)
at Object.fn (/Users/renepardon/.../node_modules/gridsome-plugin-flexsearch/gridsome.server.js:126:12)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:4305) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:4305) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
I am trying to merge a section from that uses the strapi backend to generate content. I was wondering if anyone could help me get the results to show up?
I can not get the const done right. I have tried all day today to get it to work. Sometimes you just need a lesson.
Here is the query part. I left out my miserable attempt at the const.
query Search {
allPost {
edges {
node {
id
path
title
summary
headings {
depth
value
anchor
}
}
}
}
allDocumentation {
edges {
node {
id
path
title
}
}
}
strapi {
projects{
id
title
slug
description
}
}
}
</static-query>
<script>
import SearchFocus from './SearchFocus'
export default {
components: {
SearchFocus,
},
computed: {
pages () {
let result = [];
const allPost = this.$static.allPost.edges.map(edge => edge.node);
allPost.forEach(page => {
result.push({
path: page.path,
title: page.title,
summary: page.summary
});
});
const allDocs = this.$static.allDocumentation.edges.map(edge => edge.node);
allDocs.forEach(page => {
result.push({
path: page.path,
title: page.title
});
});
return result;
}
},```
The const for allPost and allDocs works perfect. But, strapi does not follow the edge.node
Here is the Graph schema produced from the strapi query not including the two that work.
```{
"data": {
"strapi": {
"projects": [
{
"id": "1",
"title": "Pepperoni pizza",
"slug": "pepperoni-pizza",
"description": "My last cooking project, and my first pizza. Pepperoni is characteristically soft, slightly smoky, and bright red in color. Thinly sliced pepperoni is a popular pizza topping in American pizzerias."
},
{
"id": "2",
"title": "A company wants to follow B-corp guidlines",
"slug": "b-corporation-as-a-role-model",
"description": "Have you ever had a role model in your life? I was reading an article about Lemonade the other day and found something very interesting. As a matter of fact, It was all about B corporations and how to become one. "
},
{
"id": "3",
"title": "Vue.js Todo List",
"slug": "vue-js-todo-list",
"description": "I needed to get better at managing my daily tasks. So I build a nice little todo list application. It performs all CRUD operations."
},
{
"id": "4",
"title": "Search engine or Find engine",
"slug": "search-engine-or-find-engine",
"description": "Search engines rule the world. Online and in the real world via all kinds of devices from phones to fridges. It is time for something in between. Findoborg is all about Find engines. We take information and allow you to work for it instead of trying to guess your intent."
}
]
}
}
}```
Any help would be great.
Hi,
I have a really weird issue. I have the below available in my searchResults array.
images:"[{"Number":1,"FullPath":"https://images.guntrader.uk/GunImages/19/1911/19112/191128124520003/191128124520003-1.jpg","ThumbPath":"https://images.guntrader.uk/GunImages/Thumbnails/191128124520003-1-120x120.jpg"},{"Number":2,"FullPath":"https://images.guntrader.uk/GunImages/19/1911/19112/191128124520003/191128124520003-2.jpg","ThumbPath":"https://images.guntrader.uk/GunImages/Thumbnails/191128124520003-2-120x120.jpg"}]"
When I try to select an image to display in my search results, it selects the characters rather than the url.
I have <g-image :src="`${result.images[0].FullPath}`" :alt="`${result.title}`" />
to select my image, this returns undefined.
If I change this a little to <g-image :src="`${result.images[0]}`" :alt="`${result.title}`" />
I receive "[".
I am getting characters instead of the object?
Thanks for this plugin. I've got it mostly working, but the input field will only accept one word. If I type more than one, no results show. For example, if I type "Dog" get results, but if I type "Dog eats, " I don't get anything.
I want to search in more than one collection - for example:
use: 'gridsome-plugin-flexsearch',
options: {
collections: [
{
typeName: 'Faqs',
indexName: 'Faqs',
fields: ['question', 'answer']
},
{
typeName: 'Topics',
indexName: 'Topics',
fields: ['title', 'content']
}
],
searchFields: ['question', 'answer', 'title']
}}
The wrong results are returned
e.g. item with id=3, but the wrong collection
{ "index": "Faqs", "id": "3",
instead of
{ "index": "Topics", "id": "3",
Any idea?
My flexsearch.json file is over 400kb, and it loads on every page of my website. Is there a way for me to have it only load on a single designated page?
Currently this is my plugin configuration:
{
use: 'gridsome-plugin-flexsearch',
options: {
flexsearch: {
cache: true,
profile: 'match'
},
collections: [{
typeName: 'Post',
indexName: 'Post',
fields: ['title', 'description', 'tags', 'date']
}],
searchFields: ['title', 'tags'],
}
}
Is there any way that the tag output would look like this?
[
{
"id":"markdown",
"title":"markdown",
"path":"/tag/markdown/"
},
{
"id":"test-files",
"title":"test-files",
"path":"/tag/test-files/"
}
]
Currently returns an array with only the title
[
"markdown",
"test-files"
]
I was trying to use a query like I suggested on the plugin page, but I think I didn't configure it well, because it doesn't generate any results for me, so I decided to continue with the normal configuration.
Hey @thetre97 thanks for this awesome plugin.
We're getting a really strange issue with not getting the results we expect.
When we search for "school" we expect to see 3 results but we're only getting the following 2...
I messed around trying different flexsearch options but it didn't change the results. I then tried to reorder the searchFields
that we pass in by switching around title
and sectorSubtitle
. We then got back the third expected result but the other two results disappeared.
searchFields: [
"sectorSubtitle",
"title",
{
use: "gridsome-plugin-flexsearch",
options: {
autoFetch: false,
searchFields: [
"title",
"sectorSubtitle",
"tags",
"article_description",
"article",
"subtitle",
"name",
"sectors_groups_we_fund",
"sector_asset_examples",
"service_detail_title",
"service_detail",
"team_section_title",
"team_member_name",
"profile_excerpt",
"description",
"faq_question",
"search_meta",
],
collections: [
{
typeName: "DatoArticle",
indexName: "DatoArticle",
fields: ["title"],
},
{
typeName: "DatoFinanceOption",
indexName: "DatoFinanceOption",
fields: ["title"],
},
{
typeName: "DatoLandingPage",
indexName: "DatoLandingPage",
fields: ["title"],
},
{
typeName: "DatoSector",
indexName: "DatoSector",
fields: ["title"],
},
{
typeName: "DatoService",
indexName: "DatoService",
fields: ["title"],
},
{
typeName: "DatoTeamMember",
indexName: "DatoTeamMember",
fields: ["title"],
},
{
typeName: "DatoWebinar",
indexName: "DatoWebinar",
fields: ["title"],
},
{
typeName: "DatoFAQ",
indexName: "DatoFAQ",
fields: ["title"],
},
],
},
},
With the config above (before changing the order) I can see in flexsearch.json
that school
is appearing twice, once with 2 ids for the article results, and the second time with just 1 id for the eduction sector result.
I'm not sure where we're going wrong or if it's a bug/config issue. Really appreciate any help you can offer.
Thanks
Hey,
I would like to load the search index, when the user opens a search overlay on a page. The overlay can be opened from different routes, so I can't use the autoFetch with defining pathes. As I understand your text right I can set the autoFetch to false and then load the search index in someway. Do you have an example for that or can point me in the right direction?
Thank you very much for your help in advance.
Best regards
Chris
Hi my use case is like the following
{
use: 'gridsome-source-graphql',
options: {
url: 'http://gridsome_graphql_server',
fieldName: 'FieldName',
typeName: '',
},
},
{
use: 'gridsome-plugin-flexsearch',
options: {
searchFields: ['title'],
collections: [
{
query: `
{
allBlog{edges{
node{
id
path
content
excerpt
title
tags{
title
}
}
}
}
}
`,
path: 'allBlog.edges',
indexName: 'Blog'
},
}
now the above does not work, because path: 'allBlog.edges',
this is a list of edges where each edge contains a property called node
which actually is the actual node
I had to do something here https://github.com/thetre97/gridsome-plugin-flexsearch/blob/main/gridsome.server.js#L107
return nodes.map(item => {
const node = item.node
my question is this a bug, or is there a way through path
property to make this work?
the example in the documentation
query: `{ wordpress { posts { nodes { id, title, uri, excerpt, description, featuredImage { altText, sourceUrl } } } } }`,
is not a standard way for a graphql server where the query usually uses
{posts {edges {node{ id title path blah }}}}
Is there a way to also search file based pages? Would be nice if the HTML/Text contents can be parsed and searched without a collection
Would be great to see a demo of it in action. Thanks.
Hi, I'm from Russia and want to add flexsearch plugin on my Gridsome blog(https://frontips.ru/) but it's not work with Cyrillic encode
If I type text on English language I get result but if I type on Russian language Post Title not founding
{
use: 'gridsome-plugin-flexsearch',
options: {
searchFields: ['title'],
collections: [
{
typeName: 'Post',
indexName: 'Post',
fields: ['title']
}
]
}
}
How can I solve this problem?
I'm experiencing an odd issue whereby only the id
, path
and slug
fields of a collection are being added to each item in the flexsearch index, with all other fields being ignored.
{
use: 'gridsome-plugin-flexsearch',
options: {
flexsearch: {
profile: 'match'
},
searchFields: ['name', 'path'],
collections: [
{
typeName: 'Document',
indexName: 'Documents',
fields: ['name', 'id', 'path', 'slug', 'type']
}
]
}
}
Upon running gridsome develop
, I am notified that, as expected, all nodes in my collection were successfully added to the search index, but upon inspecting flexsearch.json, only the above three fields are included for each node in the index entry (name
and type
are not included):
Yet when querying in the GraphQL explorer, I have no issues retrieving these fields' values:
query {
document (id: "recGDLb8jVCL8bYFf") {
name
type
slug
path
}
}
Returns:
{
"data": {
"document": {
"name": "The Bangladesh Citizenship (Temporary Provisions) Order, 1972",
"type": [
"Domestic Law and Policy"
],
"slug": "the-bangladesh-citizenship-temporary-provisions-order-1972",
"path": "/documents/the-bangladesh-citizenship-temporary-provisions-order-1972/"
}
}
}
Everything also seems okay when looking at the schema of the type Document:
For reference, my environment is:
I don't think it should be relevant, but I am using the gridsome/source-airtable plugin to build the Document collection by fetching records from Airtable, but it appears that sources and the GraphQL schema are created before the Search Index, so this shouldn't be a problem.
When I search in English keywords that title and content contain,It works well.But When I try Chinese,It didn't work.
Support Chinese
gridsome: 0.7.12
gridsome-plugin-flexsearch:0.1.12
Hey guys,
I want to use the flexsearch plugin with a Shopify website. I also use your Shopify Source Plugin for queries to Shopify.
I would like to search through the products. Unfortunately it doesn't creates the full query for one product. Here is an example of one search item from the flexsearch.json:
"Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQ0NjMzMzI4NTE4NTE=": {
"index": "Product",
"id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQ0NjMzMzI4NTE4NTE=",
"path": "/product/lodenmantel-wolle-grun-l/",
"variants": "[{\"availableForSale\":true,\"compareAtPrice\":null,\"id\":\"Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMTg5NDA2NjgyMzMwNw==\",\"image\":{\"typeName\":\"ShopifyImage\",\"id\":\"Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTM5NzY0MDQ4ODU2NDM=\"},\"price\":{\"typeName\":\"ShopifyProduct_Variants_Price\",\"id\":\"AT-1lQ_5pdlekGFPa6Kq8\"},\"selectedOptions\":[{\"name\":\"Size\",\"value\":\"L\"},{\"name\":\"Color\",\"value\":\"Grün\"}],\"sku\":\"MA-028-1911\",\"title\":\"L / Grün\",\"weight\":1400,\"weightUnit\":\"KILOGRAMS\"}]",
"priceRange": {
"minVariantPrice": {
"typeName": "ShopifyProduct_PriceRange_MinVariantPrice",
"id": "i-y_HaiYoQ07A-PGvLWdE"
},
"maxVariantPrice": {
"typeName": "ShopifyProduct_PriceRange_MaxVariantPrice",
"id": "aBSGIuzc-kAnC9uCiC9dr"
}
},
"images": "[{\"typeName\":\"ShopifyImage\",\"id\":\"Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTM5NzY0MDQ4ODU2NDM=\"},{\"typeName\":\"ShopifyImage\",\"id\":\"Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTM5NzY0MDQ5MTg0MTE=\"},{\"typeName\":\"ShopifyImage\",\"id\":\"Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTM5NzY0MDQ5NTExNzk=\"},{\"typeName\":\"ShopifyImage\",\"id\":\"Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTM5NzY0MDQ5ODM5NDc=\"},{\"typeName\":\"ShopifyImage\",\"id\":\"Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTM5NzY0MDUwMTY3MTU=\"}]",
"description": "Ein Lodenmantel zum Verlieben! Geschmückt ist der Vintage Mantel mit karierten Highlights und Holzknöpfen.",
"handle": "lodenmantel-wolle-grun-l",
"title": "Lodenmantel Wolle Grün"
}
As you can see, it doesn't fetch the details of the images or the prices. Also I don't understand, why it esacpes the " in some parts of the json.
Here ist the part in my gridsome.config.js:
{
use: "gridsome-plugin-flexsearch",
options: {
collections: [
{
typeName: "ShopifyProduct",
indexName: "Product",
fields: [
"title",
"handle",
"description",
"images",
"priceRange",
"variants"
]
}
],
searchFields: ["title"]
}
}
Thank you very much for your help in advance.
Best regards
Chris
Hi,
I have the titles of products added as a search field, whilst some results are returned, not all are. I'm not sure why that would be?
I have in my config:
{
use: 'gridsome-plugin-flexsearch',
options: {
collections: [
{
typeName: 'Guns',
indexName: 'Guns',
fields: ['title', 'slug', 'images', 'price', 'mechanism', 'id']
}
],
searchFields: ['title', 'mechanism']
}
}
Some title's are returned whilst others are not.
I have built an app using forestry, I use the @gridsome/source-filesystem to get the data. It works fine when I just fetch the data using graphql. But when I get the data using gridsome-plugin-flexsearch then the src is wrong, it returns the src on my local machine. I think it has something to do with the src of the data.
Expected data (As returned when just fetching data with graphql)
/assets/static/uploads/content.svg?width=879&fit=cover&key=035634c
Returned data (From gridsome-plugin-flexsearch)
/Users/bachirkurdi/Documents/cyNy/uploads/content.svg
My graphql config for the data and search
{ use: "@gridsome/source-filesystem", options: { path: "blog/**/*.md", typeName: "BlogPost", resolveAbsolutePaths: true, remark: { externalLinksTarget: "_blank", externalLinksRel: ["nofollow", "noopener", "noreferrer"], }, }, }, { use: "@gridsome/source-filesystem", options: { path: "employees/**/*.md", typeName: "Employees", resolveAbsolutePaths: true, remark: { externalLinksTarget: "_blank", externalLinksRel: ["nofollow", "noopener", "noreferrer"], }, }, }, { use: "gridsome-plugin-flexsearch", options: { searchFields: ["title"], collections: [ { typeName: "BlogPost", fields: ["id", "path", "title", "excerpt", "image"], }, ], }, },
The searchResult function:
searchResults() { const searchTerm = this.searchTerm; if ( searchTerm.length > 2 && this.$search.search({ query: searchTerm, limit: 5 }).length > 0 ) { return this.$search.search({ query: searchTerm, limit: 5 }); } else { return this.$page.posts.edges; } }
Thank you a lot in advance 😄
when I upgrade to 0.1.11,It can't work and show
"gridsome.client.js?aebf:3 GET http://localhost:8081/cheese/flexsearch.json 404 (Not Found)" in console.
If the gridsome.config.js
has a path prefix, such as
module.exports = {
siteName: 'Search Example',
pathPrefix: '/gridsome',
};
The option is ignored, and the flexsearch.json
file is still requested from the root of the site.
Also, from a quick look at the json file, it looks like the paths in the results don't have the prefix either.
Worked famously in prior (old) version. Trying to upgrade side, but the flexsearch plugin not working.
Here's my package.json
{
"name": "rickb-recipes",
"private": true,
"scripts": {
"build": "gridsome build",
"develop": "gridsome develop",
"explore": "gridsome explore"
},
"dependencies": {
"@gridsome/plugin-google-analytics": "^0.1.2",
"@gridsome/plugin-sitemap": "^0.4.0",
"@gridsome/source-filesystem": "^0.6.2",
"@gridsome/transformer-remark": "^0.6.4",
"gridsome": "^0.7.23",
"gridsome-plugin-flexsearch": "^2.0.2",
"v-tooltip": "^2.1.3",
"vue-moment": "^4.1.0"
},
"devDependencies": {
"autoprefixer": "^9.8.8",
"gridsome-plugin-tailwindcss": "^4.1.1",
"postcss": "^7.0.39",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
}
}
and the flexsearch plugin part of my gridsome.config.js:
...
{
use: 'gridsome-plugin-flexsearch',
options: {
collections: [
{
typeName: 'Recipe',
indexName: 'Recipe',
fields: ['title', 'path', 'image', 'description']
}
],
searchFields: ['category', 'title', 'content'],
encode: "balance",
tokenize: "strict",
threshold: 0,
resolution: 3,
depth: 3
}
},
...
I tried removing the args after 'searchFields', with no change.
For example like the author.name
example below.
I think this used to work in an earlier version... did it get removed?
thank you!
options: {
searchFields: ['title', 'description', 'author.name'],
collections: [
{
typeName: 'BlogPost',
indexName: 'BlogPost',
fields: ['title', 'description'],
},
],
},
Thanks again for making this plugin. I've got it working pretty well on my development site. One thing that I can't figure out is how to clear the search results by either clicking on an X icon or clicking away to another part of the page. Any guidance on that in the documentation would be terrific.
First of all thank you for this great plugin!
Can you tell me how to make it work with Contentful Source?
Error happens when running Develop mode.
RangeError: Maximum call stack size exceeded
at Object.entries.reduce (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:42)
at Array.reduce (<anonymous>)
at parseObject (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:35)
at Object.entries.reduce (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:85)
at Array.reduce (<anonymous>)
at parseObject (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:35)
at Object.entries.reduce (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:85)
at Array.reduce (<anonymous>)
at parseObject (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:35)
at Object.entries.reduce (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:85)
at Array.reduce (<anonymous>)
at parseObject (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:35)
at Object.entries.reduce (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:85)
at Array.reduce (<anonymous>)
at parseObject (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:35)
at Object.entries.reduce (/REPONAME/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:42:85)
Environment:
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Chrome: 83.0.4103.97
Firefox: 77.0.1
Safari: 13.1.1
npmPackages:
@gridsome/plugin-sitemap: ^0.2.3 => 0.2.3
@gridsome/source-airtable: ^0.1.4 => 0.1.4
@gridsome/source-contentful: ^0.5.2 => 0.5.2
@gridsome/transformer-remark: ^0.4.0 => 0.4.0
gridsome: ^0.7.13 => 0.7.17
gridsome-plugin-algolia: ^2.1.3 => 2.1.3
gridsome-plugin-flexsearch: ^0.1.15 => 0.1.20
gridsome-plugin-gtm: ^0.1.1 => 0.1.1
gridsome-plugin-modal: ^0.1.1 => 0.1.1
gridsome-plugin-tailwindcss: ^2.2.32 => 2.2.48
gridsome-source-shopify: ^0.1.9 => 0.1.13
npmGlobalPackages:
@gridsome/cli: 0.2.1
Hi,
I have some custom field resolvers in my gridsome.server.js
. I can figure how can get my custom field with flexSearch.
Do i use the righ way?
Custom field resolver example:
// Custom field
api.loadSource(({ addSchemaResolvers }) => {
addSchemaResolvers({
Post: {
reversedTitle: {
type: 'String',
resolve (obj) {
return obj.title.split('').reverse().join('')
}
}
}
})
})
Gridsome plugin Flexsearch configuration (gridsome.config.js
):
{
use: 'gridsome-plugin-flexsearch',
options: {
searchFields: ['title'],
collections: [
{
typeName: 'Post',
indexName: 'Post',
fields: [
'id',
'title',
'reversedTitle',
]
},
]
}
}
Excpected result:
{
"id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQ3OTcxMzA5OTc4NjA=",
"path": "/post/hello",
"title": "Hello",
"reversedTitle": "olleH"
}
Obtained :
{
"id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQ3OTcxMzA5OTc4NjA=",
"path": "/post/hello",
"title": "Hello"
}
If someone has a clue,
Best regards,
— Steve
Hello, I have problems with the date fields, it comes empty, any idea what it could be? I have no problem with any other, just this one.
This is my configuration:
{
use: 'gridsome-plugin-flexsearch',
options: {
flexsearch: {
cache: true,
profile: 'match'
},
searchFields: ['title', 'tags'],
collections: [{
typeName: 'Post',
indexName: 'Post',
fields: ['title', 'description', 'date']
}, ]
}
}
This is the result of a search
[
{
"id":"7d602614-d177-428f-8096-ea1cd1bdd008",
"index":"Post",
"path":"/blog/hello-gridsome/",
"node":{
"title":"Hola Gridsome 🎉",
"description":"A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!",
"date":{
}
},
"tags":"[\"markdown\",\"releases\"]",
"title":"Hola Gridsome 🎉"
},
{
"id":"b9ad516f-762f-4648-8f05-ccd7485fc42e",
"index":"Post",
"path":"/blog/test-publication/",
"node":{
"title":"Prueba de publicación",
"description":"Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.",
"date":{
}
},
"tags":"[\"markdown\",\"test-files\"]",
"title":"Prueba de publicación"
}
]
Im using gridsome-plugin-flexsearch and it works locally, but when I try to deploy it to Netlify I get the following error:
Im including gridsome-plugin-flexsearch like this in gridsome.config.js
plugins: [
{use: 'gridsome-plugin-flexsearch',
options: {
collections: [
{
typeName: 'BookEntry',
indexName: 'BookEntry',
fields: ['id', 'title', 'access']
},
],
searchFields: ['title']
}}
,
Any ideas to solve it?
When flexsearch is enabled, it is not possible to edit markdown files and at the same time to see the content being hot-reloaded in the browser.
See this issue: gridsome/gridsome#1223
I deployed gridsome-plugin-flexsearch.
I updated the gridsome.config.js file with:
use: 'gridsome-plugin-flexsearch',
options: {
collections: [
{
typeName: 'Post',
indexName: 'Post',
fields: ['title', 'description']
}
],
searchFields: ['title']
}
I added the blocks below on my vue page:
<input
id="search"
v-model="searchTerm"
class="input"
type="text"
placeholder="Search">
<g-link
v-for="result in searchResults"
:key="result.id"
:to="result.path"
class="navbar-item">
{{ result.title }}
</g-link>
data: () => ({
searchTerm: ''
}),
computed: {
searchResults () {
const searchTerm = this.searchTerm
if (searchTerm.length < 3) return []
return this.$search.search({ query: searchTerm, limit: 5 })
}
}
My Graphql query is
`<page-query>
query {
metadata {
siteName
}
posts: allPost {
edges {
node {
id
title
resume
timeToRead
description
date (format: "DD/MM/YYYY")
path
image
}
}
}
}
</page-query>`
When I tried to access to this page, I have errors:
[Vue warn]: Error in render: "TypeError: Cannot read property 'search' of undefined"
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'search' of undefined
at VueComponent.searchResults (Vols.vue?2d49:72)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
at VueComponent.computedGetter [as searchResults] (vue.runtime.esm.js?2b0e:4836)
at Object.get (vue.runtime.esm.js?2b0e:2072)
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?
It seems the Search function is not recognized.
How would I use this plugin with the @paginate
directive?
I essentially want to paginate the results from the flexsearch.
Hi there,
All works fine on my local but when deploying I get the following:
TypeError: Object.fromEntries is not a function
at collectionStore.data.map.node (/opt/build/repo/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:72:26)
at Array.map ()
at getStoreCollection (/opt/build/repo/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:56:35)
at collection (/opt/build/repo/node_modules/gridsome-plugin-flexsearch/gridsome.server.js:122:14)
at /opt/build/repo/node_modules/gridsome-plugin-flexsearch/node_modules/p-map/index.js:57:28
Any help would be much appreciated :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.