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
kapa.ai5w 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
miho4w ago
This is not really Wasp related, it'd be a good strategy to look for "How to do search with Prisma and Postgres"
Sven
SvenOP4w ago
Thanks
Want results from more Discord servers?
Add your server