Labnotes

Published

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
🔥 Looking for more? Subscribe to Weekend Reading.