Server component database queries in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the database client in a Next.js server component.

NextJS

import [1] from '@/lib/prisma';

Drag options to blanks, or click blank then click option'

Aprisma

BReact

CuseState

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Importing React or hooks like useState which are for client components.

Trying to import 'fetch' as the database client.

You import the Prisma client instance named 'prisma' to query the database in server components.

2fill in blank

medium

Complete the code to fetch all users from the database inside a server component.

NextJS

const users = await prisma.user.[1]();

Drag options to blanks, or click blank then click option'

Acreate

BfindMany

CfindUnique

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'findUnique' which only fetches one record.

Using 'create' or 'delete' which modify data instead of fetching.

The 'findMany' method fetches all records from the 'user' table.

3fill in blank

hard

Fix the error in the server component query to fetch a user by ID.

NextJS

const user = await prisma.user.findUnique({ where: { id: [1] } });

Drag options to blanks, or click blank then click option'

Auser.id

Bid

Cparams.id

DuserId

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the string 'id' instead of the variable holding the ID.

Using 'user.id' which is undefined in this context.

You must pass the actual ID value, often from 'params.id' in Next.js server components.

4fill in blank

hard

Fill both blanks to create a server component that fetches posts and returns a list.

NextJS

export default async function Posts() {
  const posts = await prisma.post.[1]();
  return (
    <ul>
      {posts.map(post => <li key={post.[2]>{post.title}</li>)}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

AfindMany

Bid

Ctitle

Dcreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'create' instead of 'findMany' to fetch posts.

Using 'title' as the key which may not be unique.

Use 'findMany' to get all posts and 'id' as the unique key for list items.

5fill in blank

hard

Fill all three blanks to filter users older than 18 and map their names.

NextJS

const adults = await prisma.user.findMany({ where: { age: { [1]: [2] } } });
const names = adults.map(user => user.[3]);

Drag options to blanks, or click blank then click option'

Agt

B18

Cname

Dlt

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'lt' (less than) instead of 'gt'.

Mapping a property other than 'name'.

Use 'gt' (greater than) with 18 to filter adults, then map their 'name' property.