Wasp-lang•2w ago

Good way of adding a search to a prisma table

What is the best practise of making a query that searches a string on a database table. For example i have a field name and when a user searches that on the frontend i want a query to search this name in a table under field name. What are best practises

3 Replies

kapa.ai•2w ago

Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement a search functionality for a Prisma table in Wasp, you can follow these best practices: 1. Define a Query in your Wasp file: First, declare a query in your main.wasp file to handle the search operation:

query searchItems {
  fn: import { searchItems } from "@src/queries.js",
  entities: [Item]
}

query searchItems {
  fn: import { searchItems } from "@src/queries.js",
  entities: [Item]
}

2. Implement the Query: In your src/queries.js (or .ts) file, implement the search functionality using Prisma's contains filter:

export const searchItems = async (args, context) => {
  const { searchTerm } = args;
  return context.entities.Item.findMany({
    where: {
      name: {
        contains: searchTerm,
        mode: 'insensitive' // For case-insensitive search
      }
    }
  });
}

export const searchItems = async (args, context) => {
  const { searchTerm } = args;
  return context.entities.Item.findMany({
    where: {
      name: {
        contains: searchTerm,
        mode: 'insensitive' // For case-insensitive search
      }
    }
  });
}

This implementation uses Prisma's contains filter to search for items where the name field contains the given search term. The mode: 'insensitive' option makes the search case-insensitive. 3. Use the Query in your frontend: In your React component, you can use the generated useQuery hook to call this query:

import { useQuery } from 'wasp/client/operations';
import { searchItems } from 'wasp/client/operations';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const { data: items, isLoading, error } = useQuery(searchItems, { searchTerm });

  // Render your search results here
}

import { useQuery } from 'wasp/client/operations';
import { searchItems } from 'wasp/client/operations';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const { data: items, isLoading, error } = useQuery(searchItems, { searchTerm });

  // Render your search results here
}

These best practices are based on Wasp's documentation on using entities in queries (https://wasp-lang.dev/docs/data-model/operations/queries#using-entities-in-queries) and implementing queries in Node (https://wasp-lang.dev/docs/data-model/operations/queries#implementing-queries-in-node). Additionally, for more advanced search capabilities, you might want to consider: 1. Using Prisma's OR operator to search across multiple fields. 2. Implementing pagination for large result sets. 3. Adding full-text search capabilities if your database supports it (e.g., using PostgreSQL's full-text search features). Remember to adjust the field names and entity names according to your specific Wasp project structure. Wasp Queries Documentation (https://wasp-lang.dev/docs/data-model/operations/queries#working-with-queries) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•7d ago

This is not really Wasp related, it'd be a good strategy to look for "How to do search with Prisma and Postgres"

SvenOP•7d ago

Thanks

Gaming

Programming

Good way of adding a search to a prisma table