DEV Community: Mehrad Rousta

Have an offline version of a website

Mehrad Rousta — Thu, 02 Apr 2020 15:57:48 +0000

Originally posted at my blog.

At the beginning of 2017, Shamim, Maryam, and Parastoo met each other at the university, when they were passing master of tourism management course. Years of friendship and traveling made them closer to each other. And one day they decided to share this wonderful feeling with others. the result was Irandestina group. Irandestina was the space to experience the good filling of traveling. friendly, creative and adventurous trips with respect to the environment and the lives of host communities. later they've also pivoted to accessible tourism but with the fall of Iran economy now 2 of them are migrated and Irandestina stopped here.

then around July of 2019 Parastoo asked me if I can find a way to keep Irandestina website content without the need to pay for hosting. and I said "Yes!". my plan was to download the whole website and put it over Github/Gitlab Pages for free and point the domain to there too.

I remembered as a child there was some softwares on windows OS to do that. so we had a Dial-up connection and sometimes I would download all of a website so I won't need Internet access to browse it. but now I was on Linux and knew there must be an easier way to do this.

And it is! it's called WGET!

$ wget \
     --recursive \
     --no-clobber \
     --page-requisites \
     --html-extension \
     --convert-links \
     --domains irandestina.com \
     --no-parent \
         www.irandestina.com

all you I had to do was this.

The options are:

--recursive: the most important flag, download sub URLs in given address.
--domains irandestina.com: don't follow links outside irandestina.com.
--no-parent: don't follow the links outside of provided URL, can b used to download only one sub URL.
--page-requisites: get all the elements (images, CSS, JS and others) of the page.
--html-extension: save files with the .html extension.
--convert-links: convert HTML links to local version so site is navigable offline.
--no-clobber: don't overwrite the already downloaded files (used when the download is interrupted and resumed).

for more options you can check out it's manual page. also read more at thegeekstuff.com

so now let's ship this static website we just downloaded. I hope you know how to work with Git. create a new repository, go inside the downloaded directory and do this:

git init
git add *
git commit -m "add static content"
git remote add origin git@github.com:m[REPOSITORY ADDRESS]
git push -u origin master

great! now open the repository setting and make the master branch the Source for Github Pages. you can also add a cname file to the repo so you can have your custom domain. read more at Github Help.

Nested Queries in Prisma Client

Mehrad Rousta — Wed, 06 Nov 2019 03:03:26 +0000

These days I'm working on a new project in the workplace which is the first project I work on that is built on Prisma and Yoga. I worked with Prisma before on the days that the only way to access Prisma was Prisma Bindings. but at this new project, we were using Prisma Client.

Imagine this project we have here is a social media app with these models:

type User {
  id: ID! @id
  email: String! @unique
  password: String!
  username: String @unique
  fullName: String!
  role: [UserRole]!
  settings: UserSetting @relation(name: "UserSettings" link: INLINE)
  following: [User] @relation(name: "UserFollowings" link: INLINE)
  createdAt: DateTime! @createdAt
  updatedAt: DateTime! @updatedAt
}

As it's mentioned here and here, with Prisma Bindings we could use something like this for our queries to get all the nested queries we wanted:

// Prisma Bindings
me(parent, args, { prisma, request }, info) {
  const userId = getUserId(request)
  return prisma.query.user({
    where: {
      id: userId
    },
    info
  });
}

which by passing info, the Prisma query would notice what fields it must fetch from the database.

but when I was looking in my code, my Prisma query only had one parameter which was the filter/sort object. so I handled it this way:

// Prisma Client
 async user(_, __, ctx: IContext) {
    const user = await ctx.db.user({ id: ctx.user.id });
    // Getting userSettings because apparently `ctx.db.user` won't give it
    const [userSettings] = await ctx.db.userSettings({ where: { user: { id: ctx.user.id } } });
    return { ...user, settings: userSettings };
  },

But there is a problem, this method is ok on single queries but won't work on list queries:

  async users(_, __, ctx: IContext) {
    return await ctx.db.query.users();
  },

In my front-end, when I was using this users query, I wasn't getting for example user.following relational data.

the workaround for this is $fragment API explained in Prisma docs:

Instead of querying all scalar fields of a record (which is the default behavior), you can specify which fields you'd like to retrieve by using the $fragment API. This is useful to exclude large unneeded fields (like BLOB values or huge strings). It also lets you fetch arbitrary relations.

so the code would be rewritten like this:

async users(_, __, ctx: IContext) {
  const fragment = `
    fragment UserWithFollowings on User {
      id
      fullName
      email
      following {
        id
        email
      }
    }
  `;
  return await ctx.db.query.users().$fragment(fragment);
},

The docs is saying there will be a next version of the Prisma client API that has an improved and type-safe API to select fields but I couldn't find more information about it. if you have any information about it and want to share, i would be very happy!