DEV Community: Swayne

Implementing image uploading with Type-GraphQL, Apollo and TypeORM

Swayne — Mon, 19 Apr 2021 20:04:10 +0000

This week I had the unfortunate experience of trying to implement image uploading. I quickly realized that most tutorials are outdated, as Apollo Client stopped supporting image uploading with the release of Apollo Client 3. Adding to that, there wasn't much documentation for methods using TypeScript. I hope to add to that😇

You should be able to either intialize the repo with Ben Awads command npx create-graphql-api graphql-example or you can also just clone this starter GitHub Repo I made. They are nearly the same, the GitHub repo doesn't have postgres though.

My main problem was also that I wanted to integrate the image uploading with my PostgresSQL database. This (hopefully) won't be a problem anymore.

Let's implement the backend first.

Backend

First, you have to create a Bucket on Google Cloud Platform. I just chose the default settings after giving it a name. You might have to create a project first, if you don't already have one. You can get $300 worth of credits too.

Next, create a service account. You need a service account to get service keys, which you in turn need to add into your app. Click on your service account, navigate to keys, press "Add key" and select JSON. You now have an API key! Insert this into your project.

Setup

For this app I want to create a blog post with an image. So in your post.ts postresolver (or wherever your resolver to upload the image is), specify where the API-key is located:



const storage = new Storage({
  keyFilename: path.join(
    __dirname,
    "/../../images/filenamehere.json"
  ),
});
const bucketName = "bucketnamehere";

Also make a const for your bucket-name. You can see the name on Google Cloud Platform if you forgot.

To upload images with GraphQL, make sure to add [graphql-upload](https://github.com/jaydenseric/graphql-upload).



yarn add graphql-upload

Navigate to index.ts. First disable uploads from Apollo-client, since we are using graphql-upload which conflicts with Apollo's own upload-property:



const apolloServer = new ApolloServer({
    uploads: false, // disable apollo upload property
    schema: await createSchema(),
    context: ({ req, res }) => ({
      req,
      res,
      redis,
      userLoader: createUserLoader(),
    }),
  });

Next, also in index.ts we need to use graphqlUploadExpress. graphqlUploadExpress is a middleware which allows us to upload files.



const app = express();
app.use(graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }));
apolloServer.applyMiddleware({
        app
    });

We can now write our resolver. First, let's upload a single file.



import { FileUpload, GraphQLUpload } from "graphql-upload";

@Mutation(() => Boolean)
  async singleUpload(
        //1
    @Arg("file", () => GraphQLUpload)
    { createReadStream, filename }: FileUpload
  ) {
        //2
    await new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(
          storage.bucket(bucketName).file(filename).createWriteStream({
            resumable: false,
            gzip: true,
          })
        )
        //3
        .on("finish", () =>
          storage
            .bucket(bucketName)
            .file(filename)
            .makePublic()
            .then((e) => {
              console.log(e[0].object);
              console.log(
                `https://storage.googleapis.com/${bucketName}/${e[0].object}`
              );
            })
        )
        .on("error", () => reject(false))
    );
  }

The arguments are a little different. The Type-GraphQL type is GraphQLUpload which is from graphql-upload. The TypeScript type is declared as { createReadStream, filename }: FileUpload with FileUpload also being a type from graphql-upload.
We await a new promise, and using a createReadStream(), we pipe() to our bucket. Remember that we defined storage and bucketName earlier to our own bucket-values. We can then create a writeStream on our bucket.
When we are done uploading, we make the files public on our buckets and print the file uploaded. The public link to view the image uploaded is [https://storage.googleapis.com/${bucketName}/${e[0].object,](https://storage.googleapis.com/${bucketName}/${e[0].object,) so you would want to display this link on the front-end if needed. You can also just view the contents of your bucket on the GCP website.

Unfortunately, we can't verify that this works with the graphQL-playground, since it doesn't support file uploads. This is a job for Postman, which you can download here.

First, you need a suitable CURL-request for your resolver. Write this query into the GraphQL-playground:



mutation UploadImage($file: Upload!) {
 singleUpload(file: $file)
}

In the top right corner you should press the "Copy CURL"-button. You should get something like this:

curl 'http://localhost:4000/graphql' -H 'Accept-Encoding: gzip, deflate, br' -H 'Content-Type: application/json' -H 'Accept: application/json' -H 'Connection: keep-alive' -H 'DNT: 1' -H 'Origin: http://localhost:4000' --data-binary '{"query":"mutation UploadImage($file: Upload!) {\n singleUpload(file: $file)\n}"}' --compressed

You only want to keep the highlighted part. This leaves me with



{"query":"mutation UploadImage($file: Upload!) {\n singleUpload(file: $file)\n}\n"}

Which is the operation I want. Now, back to Postman. Create a new POST-request and use the "Form-data" configuration under "Body":

Fill in this data:

key	value
operations	{"query":"mutation UploadImage($file: Upload!) {\n singleUpload(file: $file)\n}\n"}
map	{"0":["variables.file"]}
0	GraphQL_Logo.svg.png

press the "file"-configuration under the last row, "0". This will allow you to upload files.

Upload your desired file and send the request. The response should return "true". You can now view the image on Google Cloud!🔥

I will now show how to create a front-end for your application. If you want to save the image to a database, there is a section at the end on this.

Front-end

Setting up the front-end is a little more complicated. First, you have to setup your apollo-client.



//other unrelated imports up here
import { createUploadLink } from "apollo-upload-client";

new ApolloClient({
    //@ts-ignore
    link: createUploadLink({
      uri: process.env.NEXT_PUBLIC_API_URL as string,
      headers: {
        cookie:
          (typeof window === "undefined"
            ? ctx?.req?.headers.cookie
            : undefined) || "",
      },
      fetch,
      fetchOptions: { credentials: "include" },
    }),
    credentials: "include",
    headers: {
      cookie:
        (typeof window === "undefined"
          ? ctx?.req?.headers.cookie
          : undefined) || "",
    },
        //...cache:...
)}

My apollo client is a little overcomplicated because I needed to make sure that cookies worked😅 But the most important part is that you create an upload-link with apollo rather than a normal http-link.

Next, you have to implement the actual input-field where users can drop their file. My favorite fileinput-library is[react-dropzone](https://github.com/react-dropzone/react-dropzone). All react-dropzone needs is a div and an input😄



<div
    {...getRootProps()}
            >
    <input accept="image/*" {...getInputProps()} />
    <InputDrop></InputDrop>
</div>

You can control what happens when a user drops a file/chooses one with their useDropzone hook:



const onDrop = useCallback(
    ([file]) => {
      onFileChange(file);
    },
    [onFileChange]
  );


const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

When the user drops a file, I call onFileChange() with the file that was just dropped in. Instead of onFileChange you could also have an updater function called setFileToUpload() using useState(). Since I have also implemented cropping of my images, I need to process the image through some other functions before it's ready to be uploaded. But before this feature, I just uploaded the file directly.

I actually used Apollos useMutation()-hook to implement uploading the image. First I define the mutation:



const uploadFileMutation = gql`
  mutation UploadImage($file: Upload!) {
    singleUpload(file: $file)
  }
`;

We now need the before-mentioned hook from Apollo



const [uploadFile] = useUploadImageMutation();

Now, to actually upload the file, you can call this function. I am using this in the context of a form with Formik, so in my case it would be when the user submits the form.



await uploadFile(fileToUpload);

This should be enough to upload the image to your bucket. Let me know if you want the code to cropping, and I will write a little on that. For now, I deem it out of scope for this tutorial.

I promised to show how to store the image in a database, so here it is🤩

Integrating with a database and TypeORM on the backend

First you need to update your (in my case) Post.ts-entity:



@Field()
@Column()
img!: string

I added a new Field where I save the image as a string. This is possible, since we are actually just saving the link to our image stored in our Google Bucket. Remember to run any migrations you might need. I am telling you since I forgot to at first😅

We then need to update our resolver on the backend:



@Mutation(() => Boolean)
  @UseMiddleware(isAuth)
  async createPost(
    @Arg("file", () => GraphQLUpload)
    { createReadStream, filename }: FileUpload,
    @Arg("input") input: PostInput,
    @Ctx() { req }: MyContext
  ): Promise<Boolean> {
    console.log("starts");
    let imgURL = "";
    const post = new Promise((reject) =>
      createReadStream()
        .pipe(
          storage.bucket(bucketName).file(filename).createWriteStream({
            resumable: false,
            gzip: true,
          })
        )
        .on("error", reject)
        .on("finish", () =>
          storage
            .bucket(bucketName)
            .file(filename)
            .makePublic()
            .then((e) => {
              imgURL = `https://storage.googleapis.com/foodfinder-bucket/${e[0].object}`;
              Post.create({
                ...input,
                creatorId: req.session.userId,
                img: imgURL,
              }).save();
            })
        )
    );
    return true;
  }

A lot of the code is the same as uploading a single file. I call Post.create({}) from TypeORM, which let's me save the new imgURL which I get after uploading the image. I also save the current user's userId, as well as the input from the form they just filled in. I get this from my PostInput-class:



@InputType()
class PostInput {
  @Field()
  title: string;
  @Field()
  text: string;
}

This is just title and text strings, that is passed to our resolver.

The last step is to actually call the resolver. This time I will use graphQL code-gen, which I also have a tutorial about. In short, it generates fully-typed hooks corresponding to our GraphQL-mutation. Here is the mutation to create a post:



mutation CreatePost($input: PostInput!, $file: Upload!) {
  createPost(input: $input, file: $file)
}

Takes the input of the post (title and text) aswell as a file. GraphQL codegen generates this hook, for the above mutation:



const [createPost] = useCreatePostMutation();

Simple as that! Remember to pass in the file and any other fields you might want to save:



await createPost({
 variables: {
  input: {
    title: values.title,
    text: values.text,
   },
 file: fileToUpload,
},

Now we are using our resolver to save the file and the other data from the form-input🔥

That's all done. If you want to know how to display the image, you can check out my other tutorial.

Conclusion

Great! Our users are now allowed to upload images to our application using Google Cloud Storage and GraphQL🎉🤩

I don't have a repo with this code isolated, but you can check it out on my side-project, FoodFinder in posts.ts in the backend and create-post.tsx for the frnot-end. As always, let me know if you have any questions😃

Making operations on your deployed PostgresSQL database Dokku VPS

Swayne — Fri, 16 Apr 2021 19:52:03 +0000

If you are like me, you like to deploy on a dokku droplet using DigitalOcean! But how do you query your database, when it's on some VPS far away from you? Today I will show you how to connect to it, and edit the database after it's been deployed.

My use-case: Add some sample data which would take too long if done through the websites front-end forms!

Getting information about your database

First you need to get information about your database. This is based on Dokku, but there should be commands to achieve the same on the VPS-service you used.

In the terminal after ssh-ing into your server, run:

dokku postgres:expose database

to expose your database. Where database is your PSQL-service name you chose when setting up the Dokku container.

Output:

Service database exposed on port(s) [container->host]: 1234->????

I have hidden my port, but in my case I needed to use the last value, which is hidden for you.

Now you have all the required information. Hop into your Database Admin Program, for me it’s DataGrip!

Name is irrelevant

Host is my backend url

Port is the value I got from the command

My user is Postgres and my password is secret🤐

database is just the name of your database

URL is autogenerated.

Press connect, and then you can make operations in your dokku database 🙌

For example, I can select all of the posts in my database:

select * from post

Let me know if you have any problems! This was just supposed to be a short article since I couldn't find a good resources elsewhere😄

How to easily implement Authentication with GraphQL and Redis

Swayne — Sun, 04 Apr 2021 21:03:12 +0000

Hey, Swayne here.

Nearly every webapp today has authentication. While it's becoming more popular to verify a user with a phone code, it's still rare to see. You will be pressed to find a popular website without classic email and password login, which is what I will be implementing today.

We will be using

GraphQL
TypeScript
TypeORM
Type-GraphQL
Redis for storing cookies
Express-sessions for the cookie-sessions

This will be backend only.

As usual, I start from Ben Awad's command npx create-graphql-api graphql-auth-example or clone this starter GitHub repo.

But this will naturally still work if you have your own project already initialized, we just avoid a lot of boilerplate code using the command.

To begin, create your User entity using TypeORM definitions, possibly in a User.ts in your entity folder:

@ObjectType()
@Entity()
export class User extends BaseEntity {
    @Field()
    @PrimaryGeneratedColumn()
    id!: number;

    @Field()
    @Column({type: "text", unique: true})
    username!: string;

    @Field(() => String)
    @Column()
    password!: string;

    @Field(() => String)
    @CreateDateColumn()
    createdAt: Date;

    @Field(() => String)
    @CreateDateColumn()
    updatedAt: Date;
  }

This will guide us in making our mutations. Next, run migrations with the TypeORM CLI:

npx typeorm migration:create -n migrationfirst

Migrations look at your entities, and create corresponding SQL to create the tables. It will still work without running this command, I just believe it's a good practice😁

Next, create a new UserResolver. In our UserResolver we will handle our registration() and login() methods:


@InputType()
class UsernamePasswordInput {
  @Field()
  username: string;
  @Field()
  password: string;
}

@Mutation(() => User)
  async register(
    @Arg("options") options: UsernamePasswordInput
  ) {
    const hashedPassword = await argon2.hash(options.password);
    const user = User.create({
      username: options.username,
      password: hashedPassword,
    }).save();

    return user;

The mutation returns a User and takes in an InputType(). InputTypes() are a way to simplify our code, so the arguments don't become too cluttered. As you can see, you just make a class with the fields and the corresponding types, which you can then pass into the mutation as an argument. In our example it's a username and password.

We make sure to hash the password using argon2 before storing it🔐

We can now call User.create() from TypeORM to store a user into our database. We make sure to pass in the hashed password, not the user-inputted one!

Let's try it out in the GraphQL playground. Start the server, go to http://localhost:4000/playground and in the window run the following mutation:

mutation {
  register(options: { username: "swayne1", password: "swayne1" }) {
    errors {
      field
      message
    }
    user {
      id
      username
      createdAt
      updatedAt
    }
  }
}

Congrats, you just created a user in your database! 🎉

Before we continue, I would like to define some more InputType()-classes.


@ObjectType()
class FieldError {
  @Field()
  field: string;
  @Field()
  message: string;
}

@ObjectType()
class UserResponse {
  @Field(() => [FieldError], { nullable: true })
  errors?: FieldError[];

  @Field(() => User, { nullable: true })
  user?: User;
}

The Fielderror class simply shows a field and message. This is useful to show the correct error message for the correct field.

We also have a UserResponse InputType, which is a function return type. We either show a list of errors, using the FieldError class we defined earlier, or returns the User.

We are now ready to implement the login()-mutation:

@Mutation(() => UserResponse)
  async login(
    @Arg("options") options: UsernamePasswordInput
  ): Promise<UserResponse> {
//1    
        const user = await User.findOne({ username: options.username });
//2   
        if (!user) {
      return {
        errors: [{ field: "username", message: "username doesn't exist" }],
      };
    }
    const valid = await argon2.verify(user.password, options.password);
//3    
        if (!valid) {
      return {
        errors: [
          {
            field: "password",
            message: "that password doesn't exist",
          },
        ],
      };
    }
//4
    return {user};
  }

We look for a user with the corresponding username. Note: that this implementation isn't case-sensitive. If you want case-sensitive username validation, where eg. "Swayne" and "swayne" are two different usernames, just call .toLowerCase on options.username.
If we can't find a user with the username inputted, the user doesn't exist so we return error.
Next we verify the password using argon2. verify() takes the hashed password and compares it to the user-inputted one, and returns true if they match🗝

If not, we return an error.
Lastly we just return the User-object if it passes all of the previous check. Note that we are only returning either Errors or a User, just like we defined UserResponse-inputtype.

Test it out on http://localhost:4000/graphql by

mutation {
  login(options: { username: "swayne", password: "swayne" }) {
    errors {
      field
      message
    }
    user {
      id
      username
    }
  }
}

Cookies are sometimes a little inconsistent. Don't hesitate to leave a comment if you are having issues.

Let's implement similar valididation for registration()

@Resolver()
export class UserResolver {
  @Mutation(() => UserResponse)
  async register(
    @Arg("options") options: UsernamePasswordInput,
    @Ctx() {req} : any
  ): Promise<UserResponse> {

    //username validation
    if (options.username.length <= 2) {
      return {
        errors: [
          {
            field: "username",
            message: "length must be greater than 2",
          },
        ],
      };
    }
    //password validation
    if (options.password.length <= 2) {
      return {
        errors: [
          {
            field: "password",
            message: "password must be greater than 2",
          },
        ],
      };
    }
    const hashedPassword = await argon2.hash(options.password);
    let user: User | undefined = undefined;
    try {
    user = await User.create({
      username: options.username,
      password: hashedPassword,
    }).save();
    } catch(err) {        
        if (err.errno === 19) {
            return {
              errors: [
                {
                  field: "username",
                  message: "username already taken",
                },
              ],
            };
        }
    }
    return { user };
  }

A few extra lines, but they are pretty similar, so don't feel overwhelmed!

First we check if the user-inputted passwords and usernames are of a length greater than 2. Note, you may want a longer password in non-testing purposes.

After hashing the password, we use a try catch block. We try to create and save a user to the database. If it fails, we return an error. In SQL-lite, the err.errno=19 is the "username already exists"-error, so we return a fitting error message. You can find the error code by console.log(err) and then triggering an error in the GraphQL playground. Look in the console logs for the error code.

To make sure the user doesn't need to login every time, we will store a cookie with the user's information on it. We will use a Redis-server for this purpose, which you can install on the website.

Sessions and cookies🍪

First I would like to go through the setup and explain how cookies and sessions work at the end.

We will have to add Redis and express-session plus their types.

yarn add redis connect-redis express-session
yarn add -D @types/redis
yarn add -D @types/express-session @types/connect-redis

We will just use the sample redis setup from the Docs, and configure a few cookie-related things.

const RedisStore = connectRedis(session)
const redisClient = redis.createClient()

  app.use(
    session({
      name: 'qid',
      store: new RedisStore({
        client: redisClient,
        disableTouch: true,
      }),
      cookie: {
        maxAge: 10000000000, //long time
        httpOnly: true,
        secure: false,  //cookie only works in https (we are developing)
        sameSite: 'lax'
      },
      saveUninitialized: false,
      secret: 'qiwroasdjlasddde', //you would want to hide this in production
      resave: false
    })
  )

we set the name to 'qid', the maxAge is how long before the cookie expires in ms. localhost isn't "https", so you should set secure to false, but definitely set it to true during production.

sameSite is a setting which controls who can set a cookie. We could also set it to 'strict' which means that a cookie can only be set if a user is directly on the site. If someone was following an email to your site, the cookie can't be set. The cookie only works in a first-party context. 'lax' allows users not directly on your site set a cookie, which is to be preferred right now.

saveUnitialized:false prevents a lot of empty session objects being saved at the store. When 'true', we save a session object at the end of the request, but in some cases we won't have anything useful to store.

The secret is a string, which redis uses to decrypt the cookie. More on that at the end.

resave:false tells redis that a particiluar session is still active, but we won't need this as we save the cookie with a (near) infinite age😅

Let's change our resolvers to use sessions!

async login(
    @Arg("options") options: UsernamePasswordInput,
    @Ctx() {req}: MyContext 
  ): Promise<UserResponse> {
    const user = await User.findOne({ username: options.username });
    if (!user) {
      return {
        errors: [{ field: "username", message: "username doesn't exist" }],
      };
    }
    const valid = await argon2.verify(user.password, options.password);
    if (!valid) {
      return {
        errors: [
          {
            field: "password",
            message: "that password doesn't exist",
          },
        ],
      };
    }
    req.session.userId = user.id;
    return { user };
  }

I make sure to get the request, req, from the Ctx()-decorator. The type, MyContext is an imported file:

export type MyContext = {
  req: Request & { session: Session & Partial<SessionData> & { userId?: number } }
  res: Response
  redis: Redis 
}

This it to avoid code-duplication and simplifies our code a lot.

Lastly, we store the current users [user.id](http://user.id) in the session, req.session.userId. In the real world, this means that auto-login is enabled.

To test it out, remember to set "request.credentials": "include", in graphql playground settings. You access the settings by clicking the top-right gear icon. After running this query:

mutation {
  login(options: { username: "swayne", password: "swayne" }) {
    errors {
      field
      message
    }
    user {
      id
      username
    }
  }
}

You can check that a cookie was set by opening chrome developer tools, opening the application tab and checking under the "cookies" tab:

The code is exactly the same in register:

    @Ctx() {req}: MyContext 
        //...
        //...
        //store user id session, auto-logs in after registration🤩
    req.session.userId = user?.id
    return { user };

I prefer when other sites auto log me in after registration, so I implement the same in my projects⚡️

How do cookies and sessions work?🤔

First, we need to know what Redis is. Redis is a big key,value map, and if you know your data-structures, you know that given a key, we can get the corresponding value. If the user log-in is successful, we store their user.id into the session with the line:

req.session.userId = user.id;

Which then sends the data to Redis, eg. {userId: 1}

In Redis, we save that to a key (remember that Redis is a K,V-map):

qwoaowkdaw: {userId:1}

Express-session will then set a cookie, for example wiqeoi4390i490 on the browser for the given userId just saved in the Key,Value-pair! If the user then makes a request, we send the cookie wiqeoi4390i4901) to the server. Our secret (the one set in index.ts) then decrypts the cookie and turns it into the key saved in redis, wiqeoi4390i4901 → qwoaowkdaw

Finally, the server makes a request to Redis with the key that we just "decrypted" in the prior step, and gets the value {userId: 1}, and then stores it on req.session for the user to use 😄

Conclusion

We have just added authentication with cookies!

Check out the code on GitHub on the auth branch:

lastnameswayne/blogpostsGraphQL

Fetching and displaying data with GraphQL on a next.js front-end

Swayne — Mon, 29 Mar 2021 10:39:29 +0000

Setting up the front-end

In this post I will be building the frontend to the graphQL server I built in my CRUD-article and authenthication-artice. For this particular blog post we will be focusing on CRUD, so only that part is necessary.

Since I want good SEO on my front-end, so I will need SSR. To achieve this, we will use next.js with the bonus of also getting fantastic routing. I will be using Chakra-UI to style the app

yarn create next-app --example with-chakra-ui frontend

now, just yarn dev and you should see a nice welcome-screen. Let's delete it.😡

To convert to tsx you should:

delete component folder
delete any filer other than _app.js, index.js and theme.js
rename _app.js, index.js and theme.js to _app.tsx, index.tsx and theme.tsx
write this in your index.tsx

import { Box } from "@chakra-ui/react"
import React from "react"

const Index = () => (
  <Box>hello</Box>
)

export default Index

leaving you with a project structure similar to:

Make sure to add the typescript types if you haven't already.

yarn add --dev typescript @types/node

Finally, time to develop. To begin with, I want to load a list of the basketball-games we have in our backend!

We will need the Apollo Client to manage the state, fetch, cache and (later) modify the application data. The apollo client has many different features, and I will cover more in the future!

Apollo-client

add the apollo-client and Graphql

yarn add @apollo/client graphql

We need to configure Apollo Client in _app.tsx

import { ChakraProvider, ColorModeProvider } from '@chakra-ui/react'

import theme from '../theme'
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import {
  ApolloProvider,
  ApolloClient,
  createHttpLink,
  InMemoryCache
} from '@apollo/client';

function MyApp({ Component, pageProps }) {

const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql'
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
});

  return (
    <ApolloProvider client ={client}>
       <ChakraProvider resetCSS theme={theme}>
      <ColorModeProvider
        options={{
          useSystemColorMode: true,
        }}
      >
        <Component {...pageProps} />
      </ColorModeProvider>
    </ChakraProvider>
    </ApolloProvider>
  )
}

export default MyApp

First we create a httplink pointing to our localhost. We need to pass the link to a new instance of the ApolloClient(). We also create a new instance of InMemoryCache which is the cache used by Apollo.

Lastly, make sure to wrap your app in <ApolloProvider> and pass in the client you created in the few lines above.

If you are getting a CORS-error, add these lines in index.ts

app.use(
    cors({
      origin: "http://localhost:3000",
      credentials: true
    }),

It baically tells CORS that requests from the front-end, http://localhost:3000, are safe to receive.

To make our lives easier, we will be using an amazing tool called GraphQL code-gen.

GraphQL Code-Gen

Let's add graphQL code-gen to our project! GraphQL code generator is a tool to generate types and hooks for your graphQL mutations and queries. For example, code-gen would generate hooks for the createGame mutation we created in the previous tutorial, so we can use it on the front-end.

We need to go through a little setup, I promise it will be worth it🙏

Install the CLI and typescript types on the front-end:

yarn add -D @graphql-codegen/cli
yarn add @graphql-codegen/typescript-operations

We need to initialize graphQL codegen. When initializing, you will be asked some questions about your project. You can copy mine if you want. The questions help the program create the config file, codegen.yaml, which you can always edit later.

yarn graphql-codegen init

Here are my answers:

default
http://localhost:4000/graphql
src/graphql/*/.graphql
default
default
no
"gen"

Now we need to create some folders

Create a folder called "generated" under the "src"-folder. Here all of the code generated by graphQL code-gen will be saved.
Create a new folder called "graphql" and inside of that create a folder called "queries". We now have a folder where we can write our queries to interact with the backend.

You should have a project structure similiar to:

├── generated
│   └── 
├── graphql
│   └── queries
│             └── 
├── pages
│   ├── _app.tsx
│   └── index.tsx
├── package-lock.json
├── package.json
├── codegen.yml
├── next-env.d.ts
├── tsconfig.json

Fetching and displaying the data

First, create query.graphql file:

query Games {
  games {
    id
    myTeamScore
    opponentTeamScore
    date
  }
}

This is simply the same query which you would write in the graphQL playground. It gets an array of Game-objects. I have named the query "Games". If you are using VS-Code, I can recommend this plugin to get syntax-highlighting in .graphql files

Now we can just run

yarn gen

in the terminal. This will generate the required hooks for all of our .graphql-files and tbeir corresponding types.

Navigate over to index.tsx, where we will map over the data.

const Index = () => {
  const { data } = useGamesQuery();

  return (
    <Box>
      {!data
        ? null
        : data.games.map((e) => {
            return <Box key={e.id}>{e.date}</Box>;
          })}
      :
    </Box>
  );
};

I map over the array of Games gotten from gamesQuery(), and show the date of each game!

Take a minute to appreciate how easy that was🙏 🙏

The workflow is:

Write your query/mutation in the graphQL playground
Paste into a .graphQL file inside either the "query"- or "mutation"-folder
run yarn gen
We now have fully typed hooks to do whatever we want.

Seriously, just look at this autofill❤️ Just pick the fields that you want to display 🤯

If the user is on a slow-connection, we should show a loading-animation to indicate that the data is on it's way.

Loading

By hovering over useGamesQuery(), code-gen has already written the documentation for us😅

As you can see, we can also get a loading boolean, which can be used to show a spinner if a user has a slow connection. Let's develop that feature!

if (loading) {
    return <Spinner></Spinner>;
  } else {
    //display the data here
}

So if the data is loading, show a spinner. I usually use the spinner from Chakra-UI, it's pretty great.

Styling

While you were reading the article, I styled the app😆 Chakra-UI makes it pretty easy, as we get a ton of pretty components out the box. In general, I am also a fan of CSS-in-JS, which Chakra also supports.

I can make a new React component, GameCard.tsx. Here is the code for the styling.

interface GameCardProps {
  date: string;
  myTeamScore: number;
  opponentTeamScore: number;
}

export const GameCard: React.FC<GameCardProps> = (props) => {
  return (
    <Box maxW="xs" m={2} borderWidth="1px" borderRadius="lg" overflow="hidden">
      <Box p="6">
        <Box d="flex" alignItems="baseline">
          {props.myTeamScore > props.opponentTeamScore ? (
            <Badge borderRadius="full" px="2" colorScheme="teal">
              Win
            </Badge>
          ) : (
            <Badge borderRadius="full" px="2" colorScheme="red">
              Loss
            </Badge>
          )}
          <Box
            color="gray.500"
            fontWeight="semibold"
            letterSpacing="wide"
            fontSize="xs"
            textTransform="uppercase"
            ml="2"
          >
            {props.date}
          </Box>
        </Box>

        <Box
          mt="1"
          maxW="50%"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          <Flex ml="auto">
            <Text>{props.myTeamScore}-</Text>
            <Text>{props.opponentTeamScore}</Text>
          </Flex>
        </Box>
      </Box>
    </Box>
  );
};

Since this isn't a guide on styling, I won't go through everything🙂

We can now map over our new <GameCards> in index.tsx and just pass in the data via props.

<Box>
        {!data
          ? null
          : data.games.map((e) => {
              return (
                <GameCard
                  myTeamScore={e.myTeamScore}
                  opponentTeamScore={e.opponentTeamScore}
                  date={e.date}
                  key={e.id}
                ></GameCard>
              );
            })}
</Box>

The resulting cards will look like this:

While we are fetching the data perfectly, our database clearly consists of false, incorrect data, since we are not winning all the time. jk.

Conclusion

Nice! We have now learnt how to show the data in our database fetched with GraphQL. As you have noticed, GraphQL Code Gen simplifies our lives considerably🥰

Building a CRUD-backend with GraphQL, TypeScript and TypeGraphQL

Swayne — Fri, 26 Mar 2021 09:17:29 +0000

Intro

Hey, Swayne here. Over the next couple of months I will be writing some articles on graphQL, because I want to understand this better. Like always, I encourage you to tear me to shreds and I would like for you to correct/question every small detail (seriously). Thank you.

For this first article I just want develop a simple hello world app. I will be testing with GraphQL playground. Note: I will be writing this using typescript and type-graphql, but it should be the same besides the explicit type definitions (and awesome autofill😉). But of course let me know if you are used to JS, I will translate it for you.

What do you need?

The recipe to a good GraphQL-based backend

✅ Resolver

🎩. Schema

💻 Apollo-Server

I will go through the basics of a GraphQL-backend using TypeScript. I will also be using TypeGraphQL.

Basics of GraphQL

To send queries with GraphQL, you have to define your types first. It's like the schema of your API, so it tells which requests should return which types. Here is an example when getting a type Person:

type Person {
    name: String!
    age: Int!
}

You are telling graphQL what type it should expect when getting the name or age of a person. Note the exclamation point ! means the field cannot be null. You don't have to define this, it's completely optional, but improves your design and database structure.

Type-GraphQL classes

TypeGraphQL is a GraphQL framework for TypeScript, which makes working with queries and schemas easier. I like TypeGraphQL (TGQL), because I think the structure is simpler and the developer experience nicer. Let's look at the above type translated into TGQL using classes and decorators

@ObjectType()
class Person {
    @Field()
    name: String!

    @Field()
    age: Int!
}

You will notice that we have added @Field() and @ObjectType. These are called decorators. @Field is used to declare what a field is, and @ObjectType marks the class as a GraphQL type.

Resolver

There are two different types of resolvers, Mutations and Queries. Queries are read-only requests to get and view data from the GQL API. Mutations are resolvers where you create, update or delete data through the API, as the name indicates. Resolvers are functions, and in TGQL you (like in the Schema) have to make a class first.

@Resolver()
class UserResolver {
}

You also have to use the @Resolver() decorator. Here is an example of a simple query:

import { Query, Resolver } from "type-graphql";

@Resolver()
export class HelloWorldResolver {
  @Query(() => String)
  hello() {
    return "hi!";
  }
}

As you can see you define a hello() function and which returns a type string with the name hello() and returns a string of "hi!".

We can now move on to an actual use-case.

CRUD-guide with a Database, TS, GraphQL and Type-GraphQL, TypeORM

We will be studying the follow technologies:

Tech-Stack

GraphQL
Type-GraphQL
TypeORM
SQL-lite
TypeScript

The code for this tutorial is available on Github under the branch "server-CRUD".

Intialize the repo with Ben Awads command npx create-graphql-api graphql-example

and delete all of the code regarding PostgresSQL in ormconfig.json

You can also just clone this starter GitHub Repo I made.

Change the data in index.ts to:

(async () => {
  const app = express();

  const options = await getConnectionOptions(
    process.env.NODE_ENV || "development"
  );
  await createConnection({ ...options, name: "default" });

  const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [HelloWorldResolver],
      validate: true
    }),
    context: ({ req, res }) => ({ req, res })
  });

  apolloServer.applyMiddleware({ app, cors: false });
  const port = process.env.PORT || 4000;
  app.listen(port, () => {
    console.log(`server started at http://localhost:${port}/graphql`);
  });
})();

To start with, we are creating an app with express()

    await createConnection();

createConnection() is from TypeORM, which establishes a connection to the SQL-lite database.

  const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [HelloWorldResolver],
      validate: true
    }),
    context: ({ req, res }) => ({ req, res })
  });

There are two important concepts in the above code, apolloServer and buildSchema(). ApolloServer is a sort of middle layer between your Server and Client. In our case we will be using it to define a schema-property, by calling the buildSchema-function from TypeGraphQL.

To build a schema, you need resolvers. Right now we are using a standard HelloWorldResolver, which we will look at soon. We are also using Apollo to get the context, making it possible to share a database connection between resolvers. Lastly, validate: true forces TypeGraphQL to validate inputs and arguments based on the definitions of your decorators.

Let's look at the last few lines in index.ts

apolloServer.applyMiddleware({ app, cors: false });

Here we are applying the apolloServer as middleware and passing on our express-app, "connecting" those two.

Lastly, we go app.listen()

  app.listen(port, () => {
    console.log(`server started at http://localhost:${port}/graphql`);
  });
})();

app.listen() takes a port and starts the server on that given port!

Entities in TGQL

After some setup, we are ready!

There are many variations of a CRUD-app, so the difference of a note-taking app and blog-post-app is often just the column names! Point being, you can adjust this to your own needs. I will be making an app to save the scores of the pick-up basketball games I play🏀,

Let's look create a starter entity to define the general structure of our application:

import { Field, Int } from "type-graphql";
import { Entity, PrimaryGeneratedColumn, Column, BaseEntity } from "typeorm";

@ObjectType()
@Entity()
export class Game extends BaseEntity {
    @Field(() => Int)
    @PrimaryGeneratedColumn()
    id: number;

    @Field(() => Int)
    @Column('int')
    myTeamScore: number;

    @Field(() => Int)
    @Column()
    opponentTeamScore: number;

    @Column()
    date: string;
  }

This is a pretty simple Game, where we save an id, myTeamScore, opponentTeamScore and date. We are making sure to give type-definition for each Column. Note, using a date-type for the date-attribute would be better practice, but handling dates in Typescript is nearly an article on it's own😅 For now, we can treat dates as a string, but I will show you how to handle them using the Date-type another time. I promise🤝

We are using the @Field()-decorator to declare the types of our field. Sometimes TGQL automatically infers them, but for numbers you have to declare the type explicitly.

On the line above the attributes, we are using two decorators @Column and PrimaryGeneratedColumn(). You need at least one PrimaryGeneratedColumn(), so it's possible to uniquely identify each user. The rest are just standard Columns in a database table.

Type-ORM will automatically infer the types from the TypeScript-types, but you can also set them manually:

@Column('int')
myTeamScore: number;

You have to check what types your database-provider uses by looking it up in the docs📄

If you wanted to, you could also save a playerName or teamName as string, but that it for another tutorial😉

Let's write some resolvers to actually create, read, update and delete in the database! First, start the server by running yarn start, as you can see in the package.JSON:

"scripts": {
    "start": "nodemon --exec ts-node src/index.ts",
    "build": "tsc"

Creating a game

Create a new file called GameResolver.ts in the resolvers folder please 🥺

The basic structure of a resolver is:

import { Mutation, Resolver } from "type-graphql";

@Resolver()
export class GameResolver extends BaseEntity {
    @Mutation()
    createGame() {

    }
}

We use the @Mutation-decorator to signify that we want to make a change. createGame() is the name of the function.

You have to add it to your resolvers-array in the buildSchema-function from index.ts:

const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [HelloWorldResolver, GameResolver]
    }),
    context: ({ req, res }) => ({ req, res })
  });

I will be building the Resolver step-by-step and explaining as I go:

import { Arg, Int, Mutation, Resolver,} from "type-graphql";

@Resolver()
export class GameResolver {
    @Mutation(() => Boolean)
    createGame(
        @Arg('myTeamScore', () => Int) myTeamScore: number,
    ) {
                console.log(myTeamScore)
        return true
    }
}

On line 3, I set the return type for the resolver as a Boolean. This isn't really important right now, as I am just returning true if it worked. I also log the score✏️

On line 5 I use the @Arg()-decorator from TGQL decorator to pass in my arguments. Inside the decorator, I set the TGQL-type of the argument myTeamScore to Int and outside the parenthesis I set the TypeScript type. Note, that you have to import Int from TGQL, since in GraphQL, the type number can either be an Int or a Float, which is why you need to specify further.

Let's add the actual logic for inserting a Game into the database⚡️

@Resolver()
export class GameResolver {
    @Mutation(() => Boolean)
    async createGame(
        @Arg('myTeamScore', () => Int) myTeamScore: number,
        @Arg('opponentTeamScore', () => Int) opponentTeamScore: number,
        @Arg('date', () => String) date: string,
    ) {
        await Game.insert({myTeamScore, opponentTeamScore, date})
        console.log(myTeamScore, date);
        return true
    }
}

On lines 5-7 I added more @Args() based on my Entity in Game.ts. On line 9, we use the TypeORM insert method to add a Game to the database.

Now, it's time to test our new Resolver.

GraphQL Playground

We will be testing these using GraphQL playground from Prisma. Go to "localhost:4000/graphQL" in your browser. In the GraphQL playground, you can write out different queries. To try out over resolver, we will write in the window:

mutation {
  createGame(
    myTeamScore: 21, 
    opponentTeamScore: 19, 
    date: "19-01-2020"
    )
}

This is like calling any function from other programming languages. I add in my own sample data. As a developer, reality can be whatever you want, so (naturally) my team wins😇

Getting the games

We can create a Query for getting the movies.

@Query(() => [Game])
    games() {
        return Game.find()
    }

We want to return an array of Game-objects, and in the method body we use Game.find() from typeORM to, well, find them😄

In the GraphQL Playground we can then write the query:

query {
  games{
    id,
    myTeamScore,
    opponentTeamScore,
    date
  }
}

This will get all of the games. The amazing thing about GraphQL (compared to REST atleast), is that you can choose what data to get. In example, you can remove the date-property from the above query if you don't need it. This is really efficient and especially useful for larger projects.

Update

Say that we want to update a game, we need to create a new resolver:

@Mutation(() => Boolean)
    async updateGame(
        @Arg('id', () => Int) id: number,
        @Arg('myTeamScore', () => Int) myTeamScore: number,
        @Arg('opponentTeamScore', () => Int) opponentTeamScore: number,
        @Arg('date', () => String) date: string,
    ) {
        await Game.update({id}, {myTeamScore, opponentTeamScore, date})
        return true
    }

The resolver above takes in 4 arguments:

an id ****to identify what post to delete
an updated myTeamScore, opponentTeamScore and date.

You then call Game.update() (also a function from TypeORM) which updates the database values. Lastly, I return true. We can now head over to the GraphQL Playgrpund:

mutation {
  updateGame(
    id: 1
    myTeamScore: 19, 
    opponentTeamScore: 21, 
    date: "19-01-2020"
    )
}

To update we make sure to pass in some sample updated values.

Delete

The last of the CRUD-operations, delete. To delete you just need an id to identify the post.

@Mutation(() => Boolean)
    async deleteGame(
        @Arg("id", () => Int) id: number
    ) {
        await Game.delete({id})
        return true
    }

You can then call Game.delete() and pass in the id as an object

In the playground:

mutation {
  deleteGame(id: 1)
}

I want to delete the first post, so I pass in the id.

Conclusion

As you can see, GraphQL gives us a structured way of making operations on the server. Using Type-GraphQL and TypeORM we can set up our Entities and and any write mutator/query resolvers we can think of. The general process is:

1️⃣ Write your entities with types and decorators.

2️⃣ Decide what you want your resolver to return.

3️⃣ Pass in the args from your entity.

4️⃣ Make the needed operation in your resolver body.

And that's it! ✅

However, there are some ways to simplify our @Args(). As you probably noticed, the Resolvers quickly get ugly the more Arguments we add. This project is pretty small, but imagine if we had more! The solution is to refactor the arguments into a separate input classes, which I will explain further in the article on Authtenthication, which is also worth reading!🙏

Feel free to leave any feedback either here or on my Twitter

Deploying a PostgresQL, Redis, GraphQL backend and frontend the easiest way!

Swayne — Tue, 23 Mar 2021 19:35:51 +0000

Hey, Swayne here. I am currently in the process of trying out different backend-hosting options. I have used Heroku for a MERN-app, which was a decent experience but I like DigitalOcean better!

Back-end📦

Today I will be deploying a PSQL and Redis-server backend project. The hosting provider I will use is in a DigitalOcean droplet with Docker installed!

In short: A digitalocean droplet is a virtual machine on a server, which will host your backend. You use dokku to setup your database and redis-server and then you can use Docker to push (upload) your code. After ssh'ing into your droplet you can docker pull the code and then build the app

Stack:

DigitalOcean🌊
Dokku💧
Docker🐳
DockerHub💙

Getting started!🔜

First you will want to create an account on DigitalOcena, you can use this link to get $100 worth of credits for 60 days. Not an affiliate link 😂

Setting up your droplet✏️

Choose the datacenter nearest to you, for me that is Frankfurt. I set up monitoring as well, but that is personal preference.

To generate an ssh key you will have to run:

ssh-keygen

After getting the key file in the default directory you can run

cat ~/.ssh/id_rsa.pub

And paste the contents in the window on DigitalOcean.

Now you just need to give your droplet a name and wait for it to be ready!

Setting up Dokku with PSQL and Redis🎮

Next, you have to copy the ipv4 and paste it into your browser search field

On this page you can scroll down and check off "Use virtualhost naming for apps" and press finish setup.

Run this command in your terminal. This will let you be able to make commands in the digital ocean droplet's virtual machine.

ssh root@[your code here]

I will refer to this as "ssh into" your app.

Create a dokku app with this command:

dokku apps:create app

The last value is the name, so I have named mine "app". Install PSQL by this command:

sudo dokku plugin:install https://github.com/dokku/dokku-postgres.git

The link links to documenation for the postgres for dokku plugin where you can find some commands. To create a database in dokku:

dokku postgres:create database

The last value is, once again, the name. To link the database named "database" to the app named "app". Note: the command takes the names:

dokku postgres:link database app

We are now done with the database for now.

Moving on to redis, we are going to need the documentation for the plugin.

sudo dokku plugin:install https://github.com/dokku/dokku-redis.git redis

To create the redis-server on dokku:

dokku redis:create server

The last value is once again the name, so I have chosen "server".

Now we have to link the server to the app. Again, by the names:

dokku redis:link server app

Now we are done with PSQL and Redis and ready to deploy our app. Verify that it worked by:

docker container list

You should see a redis- and postgres instance running.

Docker🐳

Depending on your application, you are going to need a different Dockerfile in your database project folder. I will be deploying a Node.js app, so mine looks like this:

FROM node:14

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package.json ./
COPY yarn.lock ./
COPY . .

RUN yarn

COPY .env.production .env

RUN yarn build

ENV NODE_ENV production

EXPOSE 8080
CMD [ "node", "dist/index.js" ]
USER node

A dockerfile is a set of instructions to run your app, and can therefore vary wildly between projects. I would recommend checking out the Docker docs, since it's a lengthy subject which I won't cover here.

When your Dockerfile is ready, you can run docker build:

docker build -t lastnameswayne/crudapp:1 .

The format is: docker build -t /: .

"lastnameswayne" is my username and "crudapp" is the app name which I want and it's version number one. Docker build will create an image which we will later push onto Docker Hub.

If you are on an M1 Macbook (or any other ARM chip) you have to run this build-command instead

docker buildx create --use
docker buildx build --platform linux/amd64 --push -t lastnameswayne/crudapp:1 .

Using these two commands we can build to the correct image, linux/amd64 instead of the default arm64. You might need to enable buildx in the docker settings under "experimental features".

Using DockerHub to transfer your code 🫂

Now it's time to visit Docker Hub and sign up/in. You might need to login from the command line aswell by running "docker login"

Now, we can push our Docker Image onto Docker Hub:

docker push lastnameswayne/crudapp:1

You can reuse the name from the docker build command.

We now need to use our server again, so ssh into your app again. We can pull the Docker image from Docker Hub by the command:

docker pull lastnameswayne/crudapp:1

We have now successfully pushed our code from our local computer into and pulled it into the ssh, using Docker as a sort of middleman. We are now almost done! Tag the image you just pulled down, so we can link it to the dokku app:

docker tag lastnameswayne/crudapp:1 dokku/app:latest

The last value you write as dokku/:

In the beginning I named by dokku app "app" and "latest" is the tagname that I have chosen. We can now deploy using the tagname and appname.

dokku deploy app latest

If this command worked, your backend is now deployed on the droplet. Let's move on to the front-end. I also like to setup letsencrypt and a domain, but that's very project-specific so I didn't include it. But please, let me know if you need help. It's not difficult, just hard to show in an article =)

Front-end⚛️

I will be using Vercel to deply my React and next.js app. Vercel are the creator of next.js, and has made it relatively easy to deploy a front-end project using their platform.

This is a lot easier. After making an account you can simply run

vercel login
vercel --prod

Logs you into Vercel and creates a production build of your project, then deploys it to a server. This is all you really need.

‼️Remember to set your environment variables‼️

Back-end:

Likely in your .env-file

Front-end:

In next.js you can set it in the settings on next.js and in your .env-file. Further instructions.