DEV Community

Navicstein Rotciv
Navicstein Rotciv

Posted on • Edited 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

Top comments (4)

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

Thanks a lot, it really helped ๐Ÿค—

Collapse
 
navicsteinr profile image
Navicstein Rotciv

๐Ÿค”๐Ÿค” only if people will write their docs in this manner

Collapse
 
navicsteinr profile image
Navicstein Rotciv

๐Ÿฅฐ๐Ÿฅฐ