Published July 1st, 2020

Modern web development is just naming things

Modern web development is just naming things. Then naming them again. Then naming them some more. Using different letter case and hyphenation in each case. Also, more than one way to signal whether a name could be valueless. 🤷‍♂️

import type { NameA } from 'schema.ts';

export default NameA() {
  const { data } = useQuery(`
     query nameA {
       nameA {
         nameB
         nameC
       }
     }
  `);
  if (!data)
    return null;
  const { nameB, nameC } = data.nameA as NameA;
  return (
     <section className="name-a">
      <h1>{nameB}</h1>
      <p>{nameC}</p>
     </section>
  );
}

components/NameA.tsx

export type Query = {
  __typename?: 'Query';
  nameA?: Maybe<NameA>;
};

export type NameA = {
  __typename?: 'String';
  nameB?: Maybe<string>;
  nameC?: Maybe<string>;
};

graphql/schema.ts

type Query {
  nameA: NameA
}

type NameA {
  nameB: String
  nameC: String
}

graphql/schema.graphql

import type { NameA } from 'schema.ts';

export const Query = {
  async nameA(): Promise<NameA> {
    const record = await prisma.name_a.findOne();
    return {
      nameB: record.name_b,
      nameC: record.name_c
    };
  }
};

graphql/resolvers.ts

model name_a {
  id     Int @id
  name_b String?
  name_c String?
}

db/schema.prisma

.name-a {
  background-image: url('name_a.png');
}

.name-a h1 {
  font-family: 'Name A Pro';
}

styles/name_a.css