End to End React with Prisma 2

In this step, we will utilize a find feature that is built into Prisma 2 to return feeds or tags where the name contains a search string that we pass in. This will allow us in the ui to search for matches that contain a certain string and as the person refines their search, we will get back updated results in realtime.

Before we add those, let's first add feedTags and bundleTags queries so we can see how just the standard findMany response works. Add the following queries to the resolvers block.

utils/api/resolvers.ts

const resolvers = {
  // other definitions
  Query: {
    // many other queries
    feedTags: (parent, args, { prisma }) => prisma.feedTag.findMany(),
    bundleTags: (parent, args, { prisma }) => prisma.bundleTag.findMany(),
  },
}

By default, if we don't pass in any parameters to the findMany it will return all the records that it can find for that item type. Now we can go over to the typeDefs file and define the types for these two queries- nothing too surprising, we did this already for our feeds and bundles queries.

utils/api/typeDefs.ts

# other definitions
type Query {
  # many other queries
  feedTags: [FeedTag]
  bundleTags: [BundleTag]
}

Now let's add the find queries. We will add findFeeds, findFeedTags, and findBundleTags queries that all take a parameter called "search" which is a string that we want to match against the name of the item. Previously when searching for an id, we've used the { where: {id: "our-id" }} pattern. When searching for a partial match, Prisma 2 allows us to use the { where: {name: { contains: "partial-match" }}} pattern. Here, contains is the keyword that allows you to search for a partial match, name can be any parameter that we want, so we could make a different query that searched for bundle.description matches, for example.

utils/api/resolvers.ts

const resolvers = {
  // other definitions
  Query: {
    // many other queries
    feedTags: (parent, args, { prisma }) => prisma.feedTag.findMany(),
    bundleTags: (parent, args, { prisma }) => prisma.bundleTag.findMany(),
    findFeedTags: (parent, { data }, { prisma }) =>
      prisma.feedTag.findMany({ where: { name: { contains: data.search } } }),
    findBundleTags: (parent, { data }, { prisma }) =>
      prisma.bundleTag.findMany({ where: { name: { contains: data.search } } }),
    findFeeds: (parent, { data }, { prisma }) =>
      prisma.feed.findMany({ where: { name: { contains: data.search } } }),
  },
}

utils/api/typeDefs.ts

input FindFeedTagsInput {
  search: String
}
input FindBundleTagsInput {
  search: String
}
input FindFeedsInput {
  search: String
}
# other definitions
type Query {
  # many other queries
  feedTags: [FeedTag]
  bundleTags: [BundleTag]
  findFeedTags(data: FindFeedTagsInput): [FeedTag]
  findBundleTags(data: FindBundleTagsInput): [BundleTag]
  findFeeds(data: FindFeedsInput): [Feed]
}

Try out the find queries and make sure they all return either an empty array or an array of matches and let's go to the next step.