DEV Community

Navicstein Rotciv
Navicstein Rotciv

Posted on • Updated on

Am drowned! 😭 can someone explain what prisma and apollo is like am 12!

Hi everyone, I've been following graphql lately and i don't yet fully understand the difference between prisma, graphql and apollo grapghql, ive gone through their docs but the whole concept seems overwhelming i would want the community to explain how they differ from each other and what they tend to fix, Thanks

Discussion (6)

Collapse
crimsonmed profile image
Médéric Burlet

Prisma

Prisma is a database ORM. This means that in your schema.prisma you can define tables and regardless of if you are using mysql, postgresql or others prisma will handle the data.

Prisma will generate a photon api file which is what will let you query the database. For instance you would have:

const users = await photon.users.findMany();
Enter fullscreen mode Exit fullscreen mode

Prisma example: github.com/prisma/photonjs#api-exa...

GraphQL

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data.

Think of it as your express node app but instead of having to define many endpoints: /user, /posts, /subscriptions
You have only one endpoint where you structure queries almost like javascript objects:

{
  user {
    name
  }
}
Enter fullscreen mode Exit fullscreen mode

When calling the API you can specify which fields you want so in database you would have: user: {name, age, gender, password}

and you could also query:

{
  user {
    name
    age
  }
}
Enter fullscreen mode Exit fullscreen mode

Queries example: graphql.org/learn/queries/

Apollo

Apollo has many tools and parts in it so it would depend the one you use. For my project I have used: React Apollo: apollographql.com/docs/react/api/r...

Which generates code and wraps objects, queries to the graphql endpoint.

for instance you can define one query:

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;
Enter fullscreen mode Exit fullscreen mode

And you can then use a function as follows:

function Dogs({ onDogSelected }) {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}
Enter fullscreen mode Exit fullscreen mode

In here Apollo will directly talk with the GraphQL endpoint and execute the necessary query and handle response and loading states. Apollo also implements query caching, and more.
Source: apollographql.com/docs/react/data/...

Collapse
navicsteinr profile image
Navicstein Rotciv Author

Thanks a lot, it really helped 🤗

Collapse
navicsteinr profile image
Navicstein Rotciv Author

🥰🥰

Collapse
navicsteinr profile image
Navicstein Rotciv Author

🤔🤔 only if people will write their docs in this manner