DEV Community: Álvaro

How to: implement payments in your app

Álvaro — Tue, 25 Jul 2023 17:43:33 +0000

Hi there! It's been a while since I didn't post, so I hope I didn't lost my magic.

Today we are gonna talk about payments and how we can set up single payments in our webapp. Also, we will cover subscriptions (or recurring payments) in upcoming posts.

Personally, I think that payments are one of the less explored universe but one of the greatests. I've learned a lot working on a fintech startup.

We are going to use Stripe, Remix, Typescript and Tailwind. I'm choosing these technologies because they are one of the most (if not the most) popular in the web development.

First of all, let's create our project and get our app running.
To do this, follow me.

You can check the final project here: https://dev-to-stripe.vercel.app

Payment data:
Card: 4242 4242 4242 4242
Date: 12/34
CVV: 123

repository: https://github.com/AlvaroJSnish/dev-to-stripe

Create the project

Open your terminal and create a new remix app:

npx create-remix@latest

It's very straightforward, choose you app name, then just a basic app. For the server, you can choose wathever you want, but I'm sticking with Vercel. Finally, Typescript and we are good to go.

Selecting Vercel is not necessary anymore to deploy on Vercel, maybe you see a warning or maybe not. Anyways, is not important or blocking right now.

Before we get to code, let's deploy our app.

Deploy

First, we initialize git inside our repository:

git init

Now we need to create a repository on Github (or the tool you are using for).

Add your origin to the project:

git remote add origin https://github.com/yourusername/yourrepository.git

Change the branch to main, add the code, commit and push:

git branch -M main
git add .
git commit -m "First commit"
git push -u origin main

Now, head to Vercel and log in or create an account (you can link your github account). Then you can create a new project and import the repository that we just created. It takes less than a minute. Continue to the dashboard to see your project; it will live in an url like: yourreponame.vercel.app

Now everytime that we push to main it will be deployed on our URL, so we can test our changes live.

Add Tailwind

Finally in the funny part! Before we get to code, let's add a dependency to make our app pretty: tailwind.

In remix.config.js, let's add tailwind support:

module.exports = {
  ...
  tailwind: true,
  ...
};

Now install Tailwind and initialize its config:

npm install -D tailwindcss
npx tailwindcss init --ts

Let's tell Tailwind which files to generate classes from. In tailwind.config.js:

content: ["./app/**/*.{js,jsx,ts,tsx}"],

In the app directory, create a tailwind.css file and add these lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally in app/root.ts, let's add tailwind:

import styles from "./tailwind.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
  ...(cssBundleHref
    ? [
        { rel: "stylesheet", href: cssBundleHref },
      ]
    : []),
];

Now if we go to app/routes/_index.tsx and we change the content to:

export default function Index() {
  return <h1 className="text-xl text-green-400">Hello World!</h1>;
}

We can see that tailwind it's working.

Set up Stripe

The hardest part of everything is signing up for Stripe. Not joking. Go to https://stripe.com and create an account. There is a lot of information to fill, but don't worry, not everything is necessary and I believe that you can skip most of it. Just think that they ask for that much because it's intended to go live a make real payments.

Once you have your account, make sure you are in test mode: top right, check it.

If you go to developers > API Keys, you can see your publish and private keys. Copy them.

Now, go to your project and create .env at the root, then paste them:

STRIPE_PUBLIC_KEY=...
STRIPE_SECRET_KEY=...

Now let's install dotenv and Stripe:

npm i dotenv stripe

In app/entry.server.tsx import dotenv at the top:

import "dotenv/config";

Now, inside app, create a file named stripe.server.ts:

import Stripe from "stripe";

if (!process.env.STRIPE_SECRET_KEY) {
  throw new Error("Missing Stripe secret key");
}

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: "2022-11-15",
});

Here we are just making sure that we have the key and create a new stripe client.
We are done by now.

It's important to declare our variables in Vercel too:

In your project, go to settings > environment variables. There you can create the same variables that we just create on the .env file.

Create and sell products

Before we get into it, it's necessary to clarify something: in Stripe, like in the real world, you can sell one-time products (a shirt, car, computer, etc) or you can sell recurrent products (netflix subscription, gym pass, etc).

Depending on which flow you choose to checkout your customers, you may be required to create the products on the Stripe dashboard first. Recurrent products always have to exists in the dashboard, but one-time products not.

Go to the Stripe dashboard > products > create a new product. Create a product (one time, please), add the information, images, all that you want.

Once you have it, save it.

Go to app/routes/_index.tsx and add these lines to the code:

import { stripe } from "~/stripe.server";

export const loader: LoaderFunction = async () => {
  const products = await stripe.products.list();

  return { products: products.data };
};

Here, we are using the Stripe client we created before, and with the loader function we are server-side fetching our products.

You can choose the classnames and styles that you want, but I keep it very simple:

export default function Index() {
  const data = useLoaderData<{
    products: Array<Stripe.Product & { default_price: Stripe.Price }>;
  }>();

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <div className="flex flex-col space-y-10">
        {data.products.map((product) => (
          <Product key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

function Product({
  product,
}: {
  product: Stripe.Product & { default_price: Stripe.Price };
}) {
  const amount = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: product.default_price.currency,
  }).format((product.default_price.unit_amount || 0) / 100);

  return (
    <div className="flex flex-row max-w-[400px]">
      <div className="w-200 mr-4">
        <img src={product.images[0]} alt={product.name} />
      </div>
      <div className="flex flex-col justify-center">
        <h2 className="text-xl font-bold mb-2">{product.name}</h2>
        <p className="text-sm font-light mb-3">{product.description}</p>
        <p>{amount}</p>
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50">
          Buy
        </button>
      </div>
    </div>
  );
}

Now we are going to create a server action to actually buy our product.

Modify the the Product component to include a hidden input field and pass a new property, to check if we are loading the checkout:

function Product({
  product,
  loading,
}: {
  product: Stripe.Product & { default_price: Stripe.Price };
  loading: boolean;
}) {
  const amount = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: product.default_price.currency,
  }).format((product.default_price.unit_amount || 0) / 100);

  return (
    <div className="flex flex-row max-w-[400px]">
      <input type="hidden" name="product_id" value={product.id} />
      <div className="w-200 mr-4">
        <img src={product.images[0]} alt={product.name} />
      </div>
      <div className="flex flex-col justify-center">
        <h2 className="text-xl font-bold mb-2">{product.name}</h2>
        <p className="text-sm font-light mb-3">{product.description}</p>
        <p>{amount}</p>
        <button
          disabled={loading}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {loading ? "Loading..." : "Buy"}
        </button>
      </div>
    </div>
  );
}

Now modify the main component:

export default function Index() {
  const data = useLoaderData<{
    products: Array<Stripe.Product & { default_price: Stripe.Price }>;
  }>();

  const navigation = useNavigation();

  const isBuying = navigation.state !== "idle";

  return (
    <Form
      method="post"
      className="flex flex-col items-center justify-center min-h-screen py-2"
    >
      <div className="flex flex-col space-y-10">
        {data.products.map((product) => (
          <Product key={product.id} product={product} loading={isBuying} />
        ))}
      </div>
    </Form>
  );
}

All that's left here is the action function. Without that, nothing works.

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const product_id = formData.get("product_id")?.toString();

  if (!product_id) {
    return new Response("Product not found", { status: 404 });
  }

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [
      {
        quantity: 1,
        price: product_id,
      },
    ],
    mode: "payment",
    success_url: `${process.env.APP_URL}/success`,
    cancel_url: `${process.env.APP_URL}/cancel`,
  });

  if (!session.url) {
    return new Response("Session not found", { status: 404 });
  }

  return redirect(session.url, {
    headers: {
      "cache-control": "no-cache",
    },
  });
};

If you noticed, we created a new env variable named APP_URL. Add that to your .env:

APP_URL=http://localhost:XXXX

And don't forget to add that to Vercel too! It should look like this:
https://yourappname.vercel.app

Now we have everything!

Oh... wait! We need our success and cancel routes!

Inside app/routes create cancel.tsx and success.tsx:

import { Link } from "@remix-run/react";

export default function Cancel() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <div className="flex flex-col space-y-10">
        <h1 className="text-3xl font-bold">Payment Cancelled</h1>
        <p className="text-xl">Your payment has been cancelled.</p>

        <Link to="/">Go back home</Link>
      </div>
    </div>
  );
}

import { Link } from "@remix-run/react";

export default function Success() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <div className="flex flex-col space-y-10">
        <h1 className="text-3xl font-bold">Payment Successful!</h1>
        <p className="text-xl">Your payment has been successful.</p>

        <Link to="/">Go back home</Link>
      </div>
    </div>
  );
}

Test the app

Click on your buy button. You should be redirected to the checkout page, great! Now fill the inputs with your info, and use:

Card: 4242 4242 4242 4242
Date: 12/34
CVV: 123

If you click the buy button and everything goes fine, you should redirected to the success page, but if you cancel of something goes wrong, you will be redirected to the cancel page.

If you go to: https://dashboard.stripe.com/test/payments you can check all the payments you received.

Maybe it's time to go live? That's up to you!

I hope that you learned something new today, and if that's the case, I'm more than happy!

Feel free to reach for any inquiries.

Thank you all!
Álvaro.

A tale of Tensorflow.js - Chapter 2: Models

Álvaro — Tue, 19 Jan 2021 16:30:11 +0000

Hey everyone, it's Álvaro, and today we are going to start the chapter 2 of our Tensorflow.js journey.
And today: models!

Today begins the fun part.

If you didn't read the first part, go ahead and start from there:
alvarojsnish image

A tale of Tensorflow.js - Chapter 1: Tensors

Álvaro ・ Jan 18 '21

#javascript #machinelearning #tensorflow #deeplearning

First of all: I created an HTML boilerplate for the rest of the series here:

AlvaroJSnish / A-tale-of-Tensorflow

Repo for our series on tensorflow in https://dev.to

You can fork it and switch to the branch boilerplate.

Now let's start, but we need a bit of theory first:

Machine Learning introduces a new way or form of thinking and coding.
We are used to make apps where we fetch data, we process it through a lot of rules (ifs, elses, conditions, etc) to get answers about that data.

With ML everything is different. We know the answers for the data or the questions we have, and we are going to give our machines that answers, but their job now is to figure out the rules.

Example: we are going to feed the networks with pictures of dogs and cats, and we are telling that every pic of a cat is a cat, and every pic of a dog, it's a dog. Now it's job is to figure out why.

In every way of learning (there are 4 major ways of learning in ML), there are features, and there are labels:

Features: Represent the caracteristics of the data. Number of bathrooms in a house, number of doors in a car, legs in an animal, etc.
Labels: Are the answers we want the network to figure out. The price of that house or car, or what animal appears in this picture.

But sometimes we cannot train a network with labels, and that leads us to the different learning methods I said:

Supervised learning: When we have our features and our labels.
Unsupervised learning: We have the features, but we don't have the labels.
Semi-supervised learning: We don't have all the labels, but we have all the features.
Reinforcement learning: We are not playing with that by now, but it's used in scenarios where involves behaviours and actions. Self-driving cars in example.

Now, what is a model? A model is somewhat what we call our neural networks.
We'll go deeper in that on the Layers chapter, but the neural network have a set of layers, and that layers got neurons, every neuron activated by a function to process the inputs and outputs that comes to them.

Let's code

If you download the boilerplate you should have tensorflow added to the dependencies, if not:

npm install @tensorflow/tfjs

Create a js file in the root directory and append it to our html:
index.js

console.log('hi');

Append it to the index.html head:

<script src="index.js"></script>

Let's start defining our features and our labels.
We want to make our network figure out a simple equation:
y = 2x + 3

To do so, we import tf and create our tensors.

import * as tf from '@tensorflow/tfjs'

const x = tf.tensor([1.0, 2.0, 3.0, 4.0, 5.0, 6.0])
const y = tf.tensor([5.0, 7.0, 9.0, 11.0, 13.0, 15.0])

X are our features, Y our labels. You can see the relation is y = 2x + 3

Next, let's create our model:

const model = tf.sequential({
  layers: [
    tf.layers.dense({
      units: 1,
      inputShape: [1]
    })
  ]
})

Units are the number of neurons that the layer has, meanwhile inputShape is the input_size of the tensor we are passing to it.

By now, let's stay with these properties.

Now, we need to compile and train our model:
We need to choose an optimizer, and a loss function. We'll go in deep with this in later chapters, for now, we are going to use sgd as optimizer and mse as loss.
https://en.wikipedia.org/wiki/Stochastic_gradient_descent
https://es.wikipedia.org/wiki/Error_cuadr%C3%A1tico_medio

We'll train it for 500 epochs (500 "loops"), and we'll watch how or loss decreases for every train.

We are going to wrap everything inside a function:

async function main() {
  await model.compile({
    optimizer: 'sgd',
    loss: 'meanSquaredError'
  });

  function onBatchEnd(batch, logs) {
    console.log(`Error: ${logs.loss}`)
  }

  await model.fit(x, y, { epochs: 500, verbose: true, callbacks: { onBatchEnd } });
}

Notice how in model.fit we passed our data first and our labels next.

Now it's time to make some predictions on y = 2x + 3.
If we predict hmmm... 10 on x, y should be 23. Let's try:

async function main() {
  await model.compile({
    optimizer: 'sgd',
    loss: 'meanSquaredError'
  });

  function onBatchEnd(batch, logs) {
    console.log(`Error: ${logs.loss}`)
  }

  await model.fit(x, y, { epochs: 500, verbose: true, callbacks: { onBatchEnd } });

  const prediction = await model.predict(tf.tensor([10]));

  console.log(`Prediction: ${prediction}`)
}

main();

I trained it for 1000 epochs and gave me this result:

Why it's a little bit more than the correct answer, 23? Our network is figuring out the algorythm and the equation y = 2x + 3. It's starting to think that it's a number close to 2 (a bit above and beyond) and the same with 3. But we have a very very very little quantity of data to train with (only 6 features), that's why it's not enough to figure out the exact number.

But it's a good start for our journey here. We'll go in deeper with custom models, using all the properties it has, custom training, etc.

As always, it's been a pleasure, I hope you enjoyed it.
See'll you in the next chapter!
Álvaro

A tale of Tensorflow.js - Chapter 1: Tensors

Álvaro — Mon, 18 Jan 2021 15:26:12 +0000

So it's been a while since I posted here, but here I am again!
Hey everyone, it's Álvaro, and today we are going to start a series about deep learning with tensorflow.js.

What is Tensorflow?
Well, Tensorflow is an open-source machine learning framework. It has a lot of tools and resources to make our development so so easy.

Why it's named Tensorflow?
The basic operation unit in this framework it's called Tensor, it can be either a variable or a constant, and depending on it, it can be trained or not.
A tensor usually is a multi-dimensial vector or matrix.

What is training a tensor?
We usually train our models, our neuronal networks, and training is the process that our models go through meanwhile they learn their input parameters to produce optimal outputs parameters.

For the sake of simplicity, let's keep it simple today.

Let's start with some code

First, let's start making a blank HTML template and add the tensorflow.js library.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>A Tale of Tensorflow.js</title>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
</head>
<body>

</body>
</html>

Now, we can start playing with tensors:

  <script>
    async function main() {
      const tensorOne = tf.tensor(1)
      const tensorTwo = tf.tensor([1.0, 2.0, 3.0, 4.0])
      const tensorThree = tf.tensor([[1.0, 2.0], [3.0, 4.0]])

      console.log(tensorOne)
      console.log(tensorTwo)
      console.log(tensorThree)
    }
    main();
  </script>

If we watch our console, we can see a lot of properties on the tensor:
dtype: also inferred, we can specify it when we create the tensor.
id: Each tensor has an unique ID, and now it's autogenerated as you can see.
rankType: it's the number of dimensions that our tensor has.
shape: shape it's inferred of the values we passed to the tensor. We can play with this next. We can see that for our first tensor the shape is 0, it has no dimensions, for the second tensor it's 4, it has one dimension with 4 values (let's say values for now). On the last tensor we can see [2, 2], we have two dimesions with 2 values.

For now let's keep these in mind.

The API it's not limited only to tf.tensor, we can define beforehand the dimesions of our tensor with tf.tensor2d, tf.tensor3d, even tf.tensor6d, and, as you can intuit, we can pass arrays previously created to this function calls.

Now... how we access the tensors data?
The tensor API has a variety of methods we can use, synchronously and asynchronously, we'll go with the async methods:

<script>
    async function main() {
      const tensorOne = tf.tensor(1)
      const tensorTwo = tf.tensor([1.0, 2.0, 3.0, 4.0])
      const tensorThree = tf.tensor([[1.0, 2.0], [3.0, 4.0]])

      // Print the values
      tensorOne.array().then(values => console.log(values))
      tensorTwo.array().then(values => console.log(values))
      tensorThree.array().then(values => console.log(values))

      // Download the values
      async function downloadTensorsValues() {
        const tensorOneValues = await tensorOne.data()
        const tensorTwoValues = await tensorTwo.data()
        const tensorThreeValues = await tensorThree.data()
        return {
          tensorOneValues,
          tensorTwoValues,
          tensorThreeValues
        }
      }

      console.log(await downloadTensorsValues())
    }
    main();
  </script>

Note: tensor.data() will flatten our arrays.

What if we create a tensor with different array shapes?

  <script>
    async function main() {
      const tensor = tf.tensor([[1, 2], [3]])
      console.log(tensor)
      tensor.array().then(console.log)
    }
    main();
  </script>

We can see that the console prints our tensor, but throws an error when trying to see the values:
Error: [2,2] does not match the input size.
That's because we defined our first array with 2 values (size of 2), it expects that all our arrays are the same size:

  <script>
    async function main() {
      const tensor = tf.tensor([[1, 2, 3], [3]])
      console.log(tensor)
      tensor.array().then(console.log)
    }
    main();
  </script>

Now it's expecting 2 arrays, with a length of 3.

What if we pass an incorrect shape to the tensor as a second value?

  <script>
    async function main() {
      const tensor = tf.tensor([1, 2, 3], [3, 3])
      console.log(tensor)
    }
    main();
  </script>

Error: Based on the provided shape, [3,3], the tensor should have 9 values but has 3

It's expecting a matrix with 3 columns and 3 rows:

  <script>
    async function main() {
      const tensor = tf.tensor([[1, 2, 3], [1, 2, 3], [1, 2, 3]], [3, 3])
      console.log(tensor)
      tensor.array().then(console.log)
    }
    main();
  </script>

We can make operations with our tensors:

<script>
    async function main() {
      const tensor = tf.tensor([1, 2, 3])
      const tensor2 = tf.tensor([4, 5, 6])

      // returns a new tensor with bit wise sum included
      const sum = tf.add(tensor, tensor2)
      sum.array().then(console.log)

      // what if we pass diferent shapes?
      const tensor3 = tf.tensor([[1, 1], [2, 2]])
      // const sum2 = tf.add(tensor, tensor3)
      // Error: Operands could not be broadcast together with shapes 3 and 2,2.

      // Clone a tensor
      const clonedTensor = tensor3.clone()
      clonedTensor.array().then(console.log)

      // reshape a tensor
      // we have a tensor with shape [4]
      const tensor4 = tf.tensor([1, 2, 3, 4])
      console.log(tensor4)
      // we reshape it to [2, 2]
      const tensor4reshaped = tf.reshape(tensor4, [2, 2])
      console.log(tensor4reshaped)
      // due to async operations maybe you see this logs at the top of your console

      // we can also add values at the start and end of ours tensors with tf.pad
      const paddedTensor = tf.tensor([1, 2, 3, 4]);
      paddedTensor.pad([[1, 2]], 133).array().then(console.log) // 133 is a random number I picked
    }
    main();
  </script>

And all of this are the very few basic operations we should now to start playing with tensors and knowing what they can do and the potential and job they will have in the future.

This chapter, Chapter 1, it's a very basic introduction to tensorflow, but don't worry, at some point we'll end making instagram filters with a few lines of code in our own browser.

As always, it's been a pleasure, and if you have any doubt contact me!
Álvaro

GraphQL + Mongo v2. The easy way.

Álvaro — Sat, 01 Feb 2020 00:00:06 +0000

Hi everyone, it's Álvaro again.

This post it's the updated version of: https://dev.to/alvarojsnish/graphql-mongodb-the-easy-way-ngc, but today we are adding a new friend to our stack: Prisma! and we'll change something from it, we'll use GraphQL-Yoga instead of Apollo.

Why prisma?
Because we love our time and prisma reduces our time typing thousand of lines of code to access to our data, provides us a beautiful visual data manager and simplifies everything a lot.

Enough talk, let's start. Everything right now is the same as the old post:

You can get the full code here: Github repo

1. Set up node with babel

mkdir graphql-test && cd graphql-test
yarn init -y
yarn add --dev nodemon @babel/core @babel/node @babel/preset-env

I'm using yarn, but you can use npm.
Create a .babelrc file in your root directory, then pase this config:

{
  "presets": ["@babel/preset-env"]
}

2. Create our files and directories organization

In the root, create the folder src
Inside src: middleware, schemas and resolvers
Now, in src, create index.js
Install all the packages that we will use:

yarn add dotenv jsonwebtoken bcrypt graphql-yoga graphql-resolvers prisma-client-lib

3. Set up Prisma

In the root, create the folder prisma
Install globally prisma:

npm install -g prisma

Install docker and run it (prisma needs docker locally)
Enter the prisma folder and create a docker-compose to download and install the prisma img and the database (mongo ftw). I'll show you how to secure your database, in the prisma docs is a little confuse.

touch docker-compose.yml (or create the file)

Paste this configuration

version: '3'
services:
  prisma:
    image: prismagraphql/prisma:1.34
    restart: always
    ports:
      - '${PRISMA_PORT}:${PRISMA_PORT}'
    environment:
      PRISMA_CONFIG: |
        managementApiSecret: ${PRISMA_MANAGEMENT_API_SECRET}
        port: ${PRISMA_PORT}
        databases:
          default:
            connector: ${PRISMA_DB_CONNECTOR}
            uri: ${PRISMA_DB_URI}
  mongo:
    image: mongo:3.6
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: ${MONGO_INITDB_ROOT_USERNAME}
      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_INITDB_ROOT_PASSWORD}
    ports:
      - '${MONGO_PORT}:${MONGO_PORT}'
    volumes:
      - mongo:/var/lib/mongo
volumes:
  mongo: ~

As you can see, the important data is hidden, we need to create .env file that will load this data for us (I'll put some random but valid data, the PORTS are the default for Prisma):

PRISMA_PORT=4466
PRISMA_MANAGEMENT_API_SECRET=7a7a96a9-0c65-48b6-96bf-5a4f03e2076c
PRISMA_DB_CONNECTOR=mongo
PRISMA_DB_URI=mongodb://prisma:prisma@mongo
MONGO_INITDB_ROOT_USERNAME=mongo
MONGO_INITDB_ROOT_PASSWORD=prisma
MONGO_PORT=27017

It's SUPER recomendable to use your own data.

Run:

docker-compose up -d

And, if everything goes okay, prisma and mongo will be running!

Initialize prisma:

prisma init --endpoint http://localhost:YOUR_PORT

This will generate our files datamodel.prisma and prisma.yml

Since we are using mongo (the database are documents) and we secured our docker image, we need to make some changes in the prisma.yml:

endpoint: http://localhost:YOUR_PORT
datamodel: datamodel.prisma
databaseType: document
secret: ${env:PRISMA_MANAGEMENT_API_SECRET}

generate:
    - generator: javascript-client
      output: ./generated/prisma-client/

hooks:
  post-deploy:
    - prisma generate

Create a sample schema in datamodel.prisma:

type User {
  id: ID! @id
  password: String!
  email: String! @unique
}

Run the deploy command:

prisma deploy

You can manage the data on the manager we talked about at the beginning:
http://localhost:YOUR_PORT/_admin

You will need a token to access it, you can generate it with

prisma token

and configure it on the manager. (I almost never used the manager tbh).

On our prisma.yml we configured a post-deploy hook to generate our prisma bin files, every time we change our datamodel, we need to deploy prisma and generate the files. The generation is automatic with the deploy, but if you want to do it manually:

prisma deploy
prisma generate

This will make the javascript client in ./generated/prisma-client

That's everything for prisma, let's move on the GraphQL and Javascript part!

Create a .env in the root and paste your variables:

PORT=4400
JWT_SECRET_KEY=cd72be3f-4f62-47ad-8e46-610bc2f40219
PRISMA_SECRET=7a7a96a9-0c65-48b6-96bf-5a4f03e2076c

Now, create an index.js inside the 'src' folder, and create the server:

import { GraphQLServer } from 'graphql-yoga';
import { importSchema } from 'graphql-import';

import resolvers from './resolvers';
import { Prisma } from '../prisma/generated/prisma-client';

import 'dotenv/config';

const typeDefs = importSchema('src/schemas/user.graphql');

export const db = new Prisma({
  endpoint: process.env.PRISMA_ENDPOINT || 'http://localhost:4466',
  secret: process.env.PRISMA_SECRET || '',
});

const server = new GraphQLServer({
    typeDefs,
    resolvers,
    context: async () => ({
        prisma: db,
    }),
});

server.start({ port: process.env.PORT }, () => {
    console.log('App running on http://localhost:4400');
});

Don't worry about the unresolved imports now, we are going to create them soon.
2 things to note here:

The Prisma initialization: we need to set our key to make the communication between the prisma-client and the server.
The prisma object we are passing to the GraphQL context. This is everything.

Add this script to your package.json:

"scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js"
 },

and run the server (it will crash hardly because the unresolved imports, don't worry)

yarn dev
npm run dev

Let's start with our schema, create inside src, a folder called schemas, then the file user.graphql inside:

type User {
    id: ID!
    email: String!
}

type Token {
    token: String!
}

type Query {
    signIn(email: String!, password: String!): Token!
    getUser(id: ID!): User!
}

type Mutation {
    signUp(email: String!, password: String!): Token
}

Note that we don't put the password in the User type, Prisma will handle it with the database, if we put it here, anyone could query for it, and we don't want that!

Now, let's create our resolver. Create a folder resolvers, and inside put an index.js with:

import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';

export default {
    Query: {
        getUser: async (parent, { id }, { prisma }) => {
            const user = await prisma.user({ id });
            return user;
        },
        signIn: async (parent, { email, password }, { prisma }) => {
            try {
                const user = await prisma.user({ email });

                if (!user) {
                    throw new Error('Invalid credentials');
                }

                const passwordMatch = bcrypt.compareSync(password, user.password);

                if (!passwordMatch) {
                    throw new Error('Invalid credentials');
                }

                const token = jwt.sign({ user }, process.env.JWT_SECRET_KEY, { expiresIn: 36000 });

                return { token };
            } catch (error) {
                throw new Error(error);
            }
        }
    },
    Mutation: {
        signUp: async (parent, { email, password }, { prisma }) => {
            try {
                const hashedPassword = bcrypt.hashSync(password, 12);
                const user = await prisma.createUser({ email, password: hashedPassword });

                const token = jwt.sign({ user }, process.env.JWT_SECRET_KEY, { expiresIn: 36000 });

                return { token };
            } catch (error) {
                throw new Error(error);
            }
        }
    }
}

Now, let's try our signUp! Navigate to localhost:4400 and try the signUp mutation, it will give us a token! (not so useful yet I guess)

Let's try to signIn with our user with the query signIn:

Another token, huh, what can we do with it? Hmmm, we had a query to get a user right? Let's make that only authenticated users can query it!

Modify the schema, add "me":

type Query {
    signIn(email: String!, password: String!): Token!
    getUser(id: ID!): User!
    me: User!
}

Now, let's add the generated token to our header:

Go to the playground and paste in down there, on http headers:

We need to get that token, it contains our user info... but how?
Hmm... maybe the context can do something!
Modify the index.js on src to this:

import { GraphQLServer } from 'graphql-yoga';
import { importSchema } from 'graphql-import';
import jwt from 'jsonwebtoken';

import resolvers from './resolvers';
import { Prisma } from '../prisma/generated/prisma-client';

import 'dotenv/config';

const typeDefs = importSchema('src/schemas/user.graphql');

export const db = new Prisma({
  endpoint: process.env.PRISMA_ENDPOINT || 'http://localhost:4466',
  secret: process.env.PRISMA_SECRET || '',
});

const getCurrentUser = async (request) => {
    if (!request.headers.token) {
        return null;
    }
    const user = await jwt.decode(
        request.headers.token,
        process.env.JWT_SECRET_KEY,
    );
    return { ...user };
};

const server = new GraphQLServer({
    typeDefs,
    resolvers,
    context: async ({ request }) => {
        const me = await getCurrentUser(request);

        return {
          me,
          prisma: db,
        };
    }
});

server.start({ port: process.env.PORT }, () => {
    console.log('App running on http://localhost:4400');
});

We are almost there, let's add the resolver for "me":

Query: {
        me: async (parent, { id }, { prisma, me }) => {
            const user = await prisma.user({ id: me.user.id });
            return user;
        },
...

If we try to query "me", we'll get...

That means that we are authenticated, "me" is someone, and the token is working. How can we use this power? We installed with yarn a package named combine-resolvers, so let's create a resolver to make auth requests:

Inside the index.js in resolvers:
Import the combine-resolvers:

import { combineResolvers, skip } from 'graphql-resolvers';

Create the resolver:

If "me" exists, we skip to the next resolver, the "getUser", if not exists, we throw an error.

const userIsAuthenticated = (parent, args, { me }) => {
    return me ? skip : new Error('Not authenticated');
}

And combine the getUser:

getUser: combineResolvers(
    userIsAuthenticated,
        async (parent, { id }, { prisma }) => {
            const user = await prisma.user({ id });
            return user;
        }
),

Save and let's try our resolver:

PS: if you are wondering where did I get the ID to query the getUser, just query "me" and ask for the ID instead the email (you can query both, you can query for everything you put in your schema (not prisma schema).).

With token
Without token

So, we reached our final power. We learned how to authenticate and authorize with a GraphQL server powered with Prisma.

Now, you can do everything you can imagine, roles authorization, permissions, etc. Very simple but very powerful.

As always, thank you for reaching here, and if you have any kind of problem, just let me know, I'll help you in every way I can.

Again, Álvaro here, I hope you enjoyed this!
Get the code here: Github repo

React Native Animation Series #2

Álvaro — Sun, 18 Aug 2019 15:57:49 +0000

Hi everybody! Alvaro here.
The part 1 of this post it's in medium, but I'll make the rest here from now.

Today we'll design a music player I found on dribble. All the credits to Charles Patterson, he inspired me to do this.

So, at the end of the post we'll have this:

Note that no audio will be played or the bar progressed, but if you want to, we can make it in another post!

To start, you can clone the repo from here and work on the master branch, but if you want to see the final code, switch to animations/music-player.

If you have the repo, you need to install one dependency, "react-native-paper" (yarn add react-native-paper / npm i react-native-paper). We are using the ProgressBar from this UI library.

Now, expo start, and... start!

In App.js I'm loading custom fonts, you can download roboto from google fonts, then put the files in assets/fonts.

To load the fonts, we'll use "expo-font", wait the component to be mounted, then render the music player.

If you never used custom fonts, in the expo docs are very well redacted how to load them!

import React, { useEffect, useState } from "react";

import * as Font from "expo-font";
import styled from "styled-components";

import MusicPlayer from "./src/MusicPlayer";

function App() {
  const [fontLoaded, setLoaded] = useState(false);

  useEffect(() => {
    loadFonts();
  }, []);

  const loadFonts = async () => {
    await Font.loadAsync({
      "roboto-bold": require("./assets/fonts/Roboto-Bold.ttf"),
      "roboto-light": require("./assets/fonts/Roboto-Light.ttf"),
      "roboto-medium": require("./assets/fonts/Roboto-Medium.ttf"),
      "roboto-thin": require("./assets/fonts/Roboto-Thin.ttf")
    });
    setLoaded(true);
  };

  return <Container>{fontLoaded && <MusicPlayer />}</Container>;
}

export default App;

const Container = styled.View`
  flex: 1;
  align-items: center;
  justify-content: center;
  background: #fff2f6;
`;

It's not mandatory to load this fonts, you can use others!

If we save this file, we'll get an error because expo can't find the MusicPlayer, so, let's create it!

In src/ create MusicPlayer.js and make a dummy component to dismiss the error.

In today's tutorial to follow the design we won't use spring, but nevermind. And I'll introduce new methods on the Animated API called, parallel, to execute all the animations at the same time and loop, to repeat the same animation in loop.

Also, in the first tutorial I used classes, now we will use hooks (woho!).

I'll explain everything we need to do then at the end you'll find the code, so you can challenge yourself to make it without looking the solution :P.

1 - We need to import React and useState, styled, ProgressBar, TouchableOpacity, Animated and Easing to make our rotation animation without cuts.

import React, { useState } from "react";
import styled from "styled-components";
import { ProgressBar } from "react-native-paper";
import { TouchableOpacity, Animated, Easing } from "react-native";

2 - We need 4 animations:

Move the info from the song to the top
Scale the disk when we press play
Rotate the disk when we press play
A bit opacity for the song's info

3 - A way to switch or toggle (state) between playing a song and not playing a song.

4 - Know how to interpolate the opacity and the rotation, but I'll give you the code here:

const spin = rotation.interpolate({
  inputRange: [0, 1],
  outputRange: ["0deg", "360deg"]
});

const opacityInterpolate = opacity.interpolate({
  inputRange: [0, 0.85, 1],
  outputRange: [0, 0, 1]
});

The rotation and opacity can have 2 values, 0 and 1, and will progressively increasing to 0 to 1. So for the rotation, in example, when the value is 0.5, the output (the degrees) will be 180. In this case, the opacity, from 0 to 0.85 will be 0, and in that 0.15 the opacity will increase from 0 to 1.

5 - You need to choose a song! This step is very important, and I hope you choose a good one. The icons for back, next, play and pause are free to choose too, I'm using the ones on the designs, but you can import vector-icons from expo, or use your own pngs.

6 - Render conditionally the play/pause button, remember that we have a state telling us what we are doing!

7 - All the components that have animations need to be animated components, you can declare them as normal styled components then animated them with Animated:

const Image = styled.Image`
  width: 100px;
  height: 100px;
  position: absolute;
  left: 20px;
  top: -30px;
  border-radius: 50px;
`;

const AnimatedImage = Animated.createAnimatedComponent(Image);

8 - Be patient if things goes wrong 1, 2 ... N time you try them, in the end we all learn.

Animated.parallel
This methods accepts an array of animations and execute all of them in parallel, there is a hint:

Animated.parallel([
  Animated.timing(translateY, { toValue: -70 }),
  Animated.timing(scale, { toValue: 1.2 }),
  rotationLoop(),
  Animated.timing(opacity, { toValue: 1 })
]).start();

Animated.loop
This one accepts an animation to loop, and this is our rotation animation:

Animated.loop(
  Animated.timing(rotation, {
    toValue: 1,
    duration: 2500,
    easing: Easing.linear
  })
).start();

Once we know how to do it, we need to toggle between playing or not playing the song... so how we do it? with state!

  const [toggled, setToggled] = useState(true);

and we handle this with specific animations:

const onPress = () => {
  setToggled(!toggled);
  if (toggled) {
    Animated.parallel([
      Animated.timing(translateY, { toValue: -70 }),
      Animated.timing(scale, { toValue: 1.2 }),
      rotationLoop(),
      Animated.timing(opacity, { toValue: 1 })
    ]).start();
  } else {
    Animated.parallel([
      Animated.timing(translateY, { toValue: 0 }),
      Animated.timing(scale, { toValue: 1 }),
      Animated.timing(rotation, { toValue: 0 }),
      Animated.timing(opacity, { toValue: 0 })
    ]).start();
  }
};

If you see, the rotation is in their own method, rotationLoop(), to make it more readable:

const rotationLoop = () => {
  return Animated.loop(
    Animated.timing(rotation, {
      toValue: 1,
      duration: 2500,
      easing: Easing.linear
    })
  ).start();
};

If you followed the designs you have all the css there, but in case that not, these are the components I made:

const Container = styled.View`
  width: 326px;
  height: 99.5px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 50px 57px #6f535b;
  justify-content: center;
  align-items: center;
`;

const Image = styled.Image`
  width: 100px;
  height: 100px;
  position: absolute;
  left: 20px;
  top: -30px;
  border-radius: 50px;
`;

const AnimatedImage = Animated.createAnimatedComponent(Image);

const DiskCenter = styled.View`
  width: 20px;
  height: 20px;
  border-radius: 10px;
  position: absolute;
  left: 60px;
  top: 10px;
  z-index: 10;
  background: #ffffff;
`;

const AnimatedDiskCenter = Animated.createAnimatedComponent(DiskCenter);

const Row = styled.View`
  flex-direction: row;
  align-items: center;
  height: 80px;
  width: 150px;
  justify-content: space-between;
  position: absolute;
  right: 30px;
`;

const Icon = styled.Image``;

const Playing = styled.View`
  background: rgba(255, 255, 255, 0.6);
  width: 300px;
  height: 85px;
  border-radius: 14px;
  z-index: -1;
  align-items: center;
  padding-top: 10px;
`;

const AnimatedPlaying = Animated.createAnimatedComponent(Playing);

const Column = styled.View`
  flex-direction: column;
  height: 100%;
  padding-left: 60px;
`;

const AnimatedColumn = Animated.createAnimatedComponent(Column);

const Artist = styled.Text`
  font-size: 15px;
  font-family: "roboto-bold";
  color: rgba(0, 0, 0, 0.7);
`;

const Title = styled.Text`
  font-size: 12px;
  font-family: "roboto-light";
  color: rgba(0, 0, 0, 0.7);
`;

Following the hierarchy, the connections are pretty simple.
Here you have the complete code for the MusicPlayer.js:

import React, { useState } from "react";

import styled from "styled-components";
import { ProgressBar } from "react-native-paper";
import { TouchableOpacity, Animated, Easing } from "react-native";

const translateY = new Animated.Value(0);
const scale = new Animated.Value(1);
const rotation = new Animated.Value(0);
const opacity = new Animated.Value(0);

const MusicPlayer = () => {
  const [toggled, setToggled] = useState(true);

  const spin = rotation.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"]
  });

  const opacityInterpolate = opacity.interpolate({
    inputRange: [0, 0.85, 1],
    outputRange: [0, 0, 1]
  });

  const rotationLoop = () => {
    return Animated.loop(
      Animated.timing(rotation, {
        toValue: 1,
        duration: 2500,
        easing: Easing.linear
      })
    ).start();
  };

  const onPress = () => {
    setToggled(!toggled);
    if (toggled) {
      Animated.parallel([
        Animated.timing(translateY, { toValue: -70 }),
        Animated.timing(scale, { toValue: 1.2 }),
        rotationLoop(),
        Animated.timing(opacity, { toValue: 1 })
      ]).start();
    } else {
      Animated.parallel([
        Animated.timing(translateY, { toValue: 0 }),
        Animated.timing(scale, { toValue: 1 }),
        Animated.timing(rotation, { toValue: 0 }),
        Animated.timing(opacity, { toValue: 0 })
      ]).start();
    }
  };

  return (
    <Container>
      <AnimatedImage
        source={require("./cots.jpg")}
        style={{ transform: [{ scale }, { rotate: spin }] }}
      />
      <AnimatedDiskCenter style={{ transform: [{ scale }] }} />
      <Row>
        <Icon
          source={require("./back.png")}
          style={{ width: 23.46, height: 16.93 }}
        />
        <TouchableOpacity onPress={onPress}>
          {toggled ? (
            <Icon
              source={require("./play.png")}
              style={{ width: 23.46, height: 16.93 }}
            />
          ) : (
            <Icon
              source={require("./stop.png")}
              style={{ width: 20, height: 16.93 }}
            />
          )}
        </TouchableOpacity>
        <Icon
          source={require("./next.png")}
          style={{ width: 23.46, height: 16.93 }}
        />
      </Row>
      <AnimatedPlaying style={{ transform: [{ translateY }] }}>
        <AnimatedColumn style={{ opacity: opacityInterpolate }}>
          <Artist>Quinn XCII</Artist>
          <Title>Another day in paradise</Title>
          <ProgressBar
            progress={0.5}
            color="#FF8EAB"
            style={{ width: 150, position: "absolute", bottom: 25, left: 60 }}
          />
        </AnimatedColumn>
      </AnimatedPlaying>
    </Container>
  );
};

export default MusicPlayer;

const Container = styled.View`
  width: 326px;
  height: 99.5px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 50px 57px #6f535b;
  justify-content: center;
  align-items: center;
`;

const Image = styled.Image`
  width: 100px;
  height: 100px;
  position: absolute;
  left: 20px;
  top: -30px;
  border-radius: 50px;
`;

const AnimatedImage = Animated.createAnimatedComponent(Image);

const DiskCenter = styled.View`
  width: 20px;
  height: 20px;
  border-radius: 10px;
  position: absolute;
  left: 60px;
  top: 10px;
  z-index: 10;
  background: #ffffff;
`;

const AnimatedDiskCenter = Animated.createAnimatedComponent(DiskCenter);

const Row = styled.View`
  flex-direction: row;
  align-items: center;
  height: 80px;
  width: 150px;
  justify-content: space-between;
  position: absolute;
  right: 30px;
`;

const Icon = styled.Image``;

const Playing = styled.View`
  background: rgba(255, 255, 255, 0.6);
  width: 300px;
  height: 85px;
  border-radius: 14px;
  z-index: -1;
  align-items: center;
  padding-top: 10px;
`;

const AnimatedPlaying = Animated.createAnimatedComponent(Playing);

const Column = styled.View`
  flex-direction: column;
  height: 100%;
  padding-left: 60px;
`;

const AnimatedColumn = Animated.createAnimatedComponent(Column);

const Artist = styled.Text`
  font-size: 15px;
  font-family: "roboto-bold";
  color: rgba(0, 0, 0, 0.7);
`;

const Title = styled.Text`
  font-size: 12px;
  font-family: "roboto-light";
  color: rgba(0, 0, 0, 0.7);
`;

If you found this useful and/or fun, share this, leave a like or a comment, and If you want me to change something or make more animations send me them and I will!

As always, thanks!

AlvaroJSnish / react-native-animation-series

A series of react native animations!

Animation Series

Every branch contains an animation, and we are creating them here! and here

If you want to learn animations with React Native, clone the repo and follow the tutorials!

View on GitHub

.ltag__user__id__174851 .follow-action-button { background-color: #19063a !important; color: #dce9f3 !important; border-color: #19063a !important; }

Álvaro

I'm a young spanish developer and React / GraphQL enthusiast, interested in AI/DL, python ecosystem and self-drived devices.

GraphQL + Mongodb. The easy way.

Álvaro — Sun, 02 Jun 2019 21:55:05 +0000

EDIT: Seeing the repercussion this post had I'll make one updated, using Prisma, new GraphQL features and will be available for whatever database you want to use. Thanks, Álvaro.
IT'S HERE! New version: https://dev.to/alvarojsnish/graphql-mongo-v2-the-easy-way-6cb

Hi everyone! My name is Alvaro and this is my first post here. I've been writing in other websites such as medium.

BUT! Now I'm here, and I hope to stay here for a while.

I've been playing with GraphQL the last months and, literally, I love it.

Today, we'll learn to:

How to set up a GraphQL server
How to query this API
Connect it to mongo

In the app, we'll have authenticated users, and only that way the will create posts.

Let's start!

1. Set up node with babel



mkdir graphql-test && cd graphql-test
yarn init -y
yarn add --dev nodemon @babel/core @babel/node @babel/preset-env

I'm using yarn, but you can use npm.
Create a .babelrc file in your root directory, then pase this config:



{
  "presets": ["@babel/preset-env"]
}

2. Create our files and directories organization

In the root, create the folder src
Inside src: models, schemas and resolvers
Now, in src, create index.js
Install all the packages that we will use: ```

yarn add mongoose jsonwebtoken bcrypt express graphql cors apollo-server apollo-server-express

5. Create a script in package.json to start the server:
```json


{
  "name": "graphql-test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon --exec babel-node src/index.js"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/node": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "apollo-server": "^2.6.1",
    "apollo-server-express": "^2.6.1",
    "bcrypt": "^3.0.6",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "graphql": "^14.3.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.5.12",
    "nodemon": "^1.19.1"
  }
}

In index.js is where everything begins.

3. Create the mongo models

Since we wanna focus on GraphQL, lets speed up a bit all the mongo things:

Inside models, create userModel and postModel:

postModel.js



import mongoose from 'mongoose';

const postSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  content: {
    type: String,
    required: true,
  },
  author: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'user',
  },
});

const post = mongoose.model('post', postSchema);

export default post;

userModel.js



import bcrypt from 'bcrypt';
import mongoose from 'mongoose';

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
    unique: true,
  },
  password: {
    type: String,
    required: true,
  },
  posts: [
    {
      type: mongoose.Schema.Types.ObjectId,
      ref: 'post',
    },
  ],
});

userSchema.pre('save', function() {
  const hashedPassword = bcrypt.hashSync(this.password, 12);
  this.password = hashedPassword;
});

const user = mongoose.model('user', userSchema);

export default user;

4. Create our schemas

Inside /src/schemas, we'll create postSchema.js and userSchema.js



import { gql } from 'apollo-server';

export default gql`
  type Post {
    id: ID!
    title: String!
    content: String!
    author: User!
  }

  extend type Query {
    post(id: ID!): Post!
    posts: [Post!]!
  }

  extend type Mutation {
    createPost(title: String!, content: String!): Post!
  }
`;



import { gql } from 'apollo-server';

export default gql`
  type User {
    id: ID!
    name: String!
    posts: [Post!]!
  }

  type Token {
    token: String!
  }

  extend type Query {
    user(id: ID!): User!
    login(name: String!, password: String!): Token!
  }

  extend type Mutation {
    createUser(name: String!, password: String!): User!
  }
`;

We use the extend anotation because we'll create a linkSchema, to use every schema we add together. We can only have one Query type, so extending it we can use both, also works for mutations and subscriptions.
In the user we don't add the password (security reasons), so the client can't query for it.

This is our link schema:



import userSchema from './user';
import postSchema from './post';
import { gql } from 'apollo-server';

const linkSchema = gql`
  type Query {
    _: Boolean
  }
  type Mutation {
    _: Boolean
  }
`;

export default [linkSchema, userSchema, postSchema];

I created it in schemas/index.js, and it's the schema we'll import later on our index.

5. Create our resolvers

The same way as schemas, we created postResolvers.js and userResolvers.js in src/resolvers



import { AuthenticationError } from 'apollo-server';

export default {
  Query: {
    post: async (parent, { id }, { models: { postModel }, me }, info) => {
      if (!me) {
        throw new AuthenticationError('You are not authenticated');
      }
      const post = await postModel.findById({ _id: id }).exec();
      return post;
    },
    posts: async (parent, args, { models: { postModel }, me }, info) => {
      if (!me) {
        throw new AuthenticationError('You are not authenticated');
      }
      const posts = await postModel.find({ author: me.id }).exec();
      return posts;
    },
  },
  Mutation: {
    createPost: async (parent, { title, content }, { models: { postModel }, me }, info) => {
      if (!me) {
        throw new AuthenticationError('You are not authenticated');
      }
      const post = await postModel.create({ title, content, author: me.id });
      return post;
    },
  },
  Post: {
    author: async ({ author }, args, { models: { userModel } }, info) => {
      const user = await userModel.findById({ _id: author }).exec();
      return user;
    },
  },
};



import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import { AuthenticationError } from 'apollo-server';

export default {
  Query: {
    user: async (parent, { id }, { models: { userModel }, me }, info) => {
      if (!me) {
        throw new AuthenticationError('You are not authenticated');
      }
      const user = await userModel.findById({ _id: id }).exec();
      return user;
    },
    login: async (parent, { name, password }, { models: { userModel } }, info) => {
      const user = await userModel.findOne({ name }).exec();

      if (!user) {
        throw new AuthenticationError('Invalid credentials');
      }

      const matchPasswords = bcrypt.compareSync(password, user.password);

      if (!matchPasswords) {
        throw new AuthenticationError('Invalid credentials');
      }

      const token = jwt.sign({ id: user.id }, 'riddlemethis', { expiresIn: 24 * 10 * 50 });

      return {
        token,
      };
    },
  },
  Mutation: {
    createUser: async (parent, { name, password }, { models: { userModel } }, info) => {
      const user = await userModel.create({ name, password });
      return user;
    },
  },
  User: {
    posts: async ({ id }, args, { models: { postModel } }, info) => {
      const posts = await postModel.find({ author: id }).exec();
      return posts;
    },
  },
};

Query will resolve all the "functions" we created in our schema, in the type Query.
Mutations, will resolve all the "functions" we created in our schema, in the type Mutation.
User / Post, will resolve a concrete field or type everytime we query the API looking for a user or post. This means that everytime we query for a User > Posts, the server first will go throught the Query > user, and then, will go thought User > posts (posts is the name of the field). We need to do this because we store the data in different collections.

As we see, a resolver is a function, and it has 4 arguments (parent, args, context and info).

parent: will have the data returned from the parent resolver. Example: we go thought Query > user > posts. Posts will have all the data returned un user as a parent argument.

args: will have the arguments we use in the query/mutation. If we see our schemas, post(id: ID!): Post! will have 1 argument, id.

context: the context is an object that will contain everything we pass to it in our server configuration, in our case, it has de mongo models for user and post, and "me", the current user logged in.

info: this is more complex, and Prisma goes in deep here: https://www.prisma.io/blog/graphql-server-basics-demystifying-the-info-argument-in-graphql-resolvers-6f26249f613a

As we did with schemas, create an index.js inside src/resolvers:



import postResolver from './postResolver';
import userResolver from './userResolver';

export default [userResolver, postResolver];

6 Setting everything up

Finally, in our index.js in the src/ folder:



import cors from 'cors';
import express from 'express';
import jwt from 'jsonwebtoken';
import mongoose from 'mongoose';
import { ApolloServer, AuthenticationError } from 'apollo-server-express';

import schemas from './schemas';
import resolvers from './resolvers';

import userModel from './models/userModel';
import postModel from './models/postModel';

const app = express();
app.use(cors());

const getUser = async (req) => {
  const token = req.headers['token'];

  if (token) {
    try {
      return await jwt.verify(token, 'riddlemethis');
    } catch (e) {
      throw new AuthenticationError('Your session expired. Sign in again.');
    }
  }
};

const server = new ApolloServer({
  typeDefs: schemas,
  resolvers,
  context: async ({ req }) => {
    if (req) {
      const me = await getUser(req);

      return {
        me,
        models: {
          userModel,
          postModel,
        },
      };
    }
  },
});

server.applyMiddleware({ app, path: '/graphql' });

app.listen(5000, () => {
  mongoose.connect('mongodb://localhost:27017/graphql');
});

With de function getUser, we are passing the token and verifying it, if the token is not valid, the "me" object will be null, then the client couldn't do request.
When we create the ApolloServer, we pass the schemas as typeDefs, the resolvers as resolvers, and the context, will be an async function that will resolve the previous function we created. Either a user or null, the context will have the mongo models we created, so we can operate with the database in the resolvers.
We add the express server middelware to our app, and set the API Endpoint to /graphql.
We set the port of our app to 5000, then, we connect to the db. Our db will be named graphql.

7. Testing our newborn.

Run "yarn dev" or "npm run dev".
Go to http://localhost:5000/graphql
Make some querys and mutations!

Create user

Set token in headers

Create posts

Query posts

I hope you enjoyed this as much as I did! You can contact me anytime you want to! And If you want better explanations, just ask for them, I'll be pleased to do it!