travis-r6s / gridsome-plugin-flexsearch Goto Github PK

View Code? Open in Web Editor NEW

24.0 6.0 7.0 228 KB

Add lightning fast search to Gridsome with FlexSearch

JavaScript 100.00%

gridsome gridsome-plugin search flexsearch

gridsome-plugin-flexsearch's People

Contributors

Stargazers

Watchers

Forkers

stungkit yieme natanelyoung bigfootdary alexander-heimbuch louis-l rubnvp

gridsome-plugin-flexsearch's Issues

Not working with gridsome upgrade to 0.7.23

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.

Field date

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"
   }
]

Only certain fields are successfully added to the Flexsearch Index, despite configuration

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:

gridsome v.0.7.21
gridsome-plugin-flexplugin v.1.0.5 (installed via npm)
node v.12.18.3

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.

Netlify fails to build "TypeError: Object.fromEntries is not a function"

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.

searchField as an array

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?

Only load flexsearch.json on Search Results page

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?

Can't search on multiple terms

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.

(node:4305) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'constructor' of undefined

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.

Causes UnhandledPromiseRejectionWarning in @gridsome\source-filesystem

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

Wrong result index when searching in more than one collection?

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?

Image src is wrong

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 😄

Strange Issue trying to return url from searchResults array.

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?

Is there a way to search by a nested object value?

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'],
          },
        ],
      },

Asking for a little help setting up with a section built with strapi

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.

JSON compression maybe not ideal - ends up in more data transfer

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?

Some Search Terms Not Returning An Expected Result

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.

Demo available?

Would be great to see a demo of it in action. Thanks.

TypeError: Object.fromEntries is not a function - after upgrading to gridsome v0.7.17

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

Getting error RangeError: Maximum call stack size exceeded after upgrading to Gridsome 0.7.17

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

v2 Causes undefined Error

I'm trying to upgrade to v2 and am getting the following error upon building:

Cannot read property 'map' of undefined

I'm not sure what I'm doing wrong here - I'm trying to transform the schema to enable searching in nested data structures but I just keep getting the above error.

gridsome.config.js

error message received on 'gridsome develop'

What haven't I done right?

Full Query with Shopify Source Plugin

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

Use with the @paginate directive

How would I use this plugin with the @paginate directive?

I essentially want to paginate the results from the flexsearch.

Not work with Cyrillic

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?

Using Gridsome-graphql-source with flexsearch not workin

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 }}}}

Load search index, when component is shown.

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

TypeError: app.get is not a function

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!

Results effected by searchFields order

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",

Here's our config

{
      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

Support callback function or regex in autoFetch

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,

Tags object

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.

Error when manually fetching flexsearch.json after upgrading to version 1.0.1

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

Deal with custom field resolvers

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

Version:0.1.11 - flexsearch.json 404

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.

Getting Object.fromEntries is not a function when deploying in Netlify

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 :)

Doesn't respect path prefix

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.

About Chinese Support

What happened

When I search in English keywords that title and content contain,It works well.But When I try Chinese，It didn't work.

Expected result

Support Chinese

Environment

gridsome: 0.7.12
gridsome-plugin-flexsearch:0.1.12

Indexing (and searching within) nested values

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:

Basic Issue - Setup

I am not being able to generate any search results, I wonder what am I doing wrong here. Here is my setup. Kindly help. Thank you.

Thank you once again.

[Help/Feature Request] search static file/component based pages

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

Feature request: Clear search results

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.

Deploy to Netlify

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?

Problem configuring FlexSearch

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.

"TypeError: Cannot read property 'search' of undefined"

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 to make it work with Contentful Source

First of all thank you for this great plugin!

Can you tell me how to make it work with Contentful Source?

travis-r6s / gridsome-plugin-flexsearch Goto Github PK

gridsome-plugin-flexsearch's People

Contributors

Stargazers

Watchers

Forkers

gridsome-plugin-flexsearch's Issues

What happened

Expected result

Environment

Recommend Projects

Recommend Topics

Recommend Org