• Intro Typescript
• Project example
• Explain union discrimination/ type guards
• Explain Codegen
• Explain fragments
• Explain how union discrimination/ type guards works with Codegen
• Compare, pros and cons
• Conclusion
• Summary

The field names have the font-style: italic; style. It feels wrong to me

• use next-seo instead of custom next/head ➡️ <Page>, <Article>
• remove logo from defaultSeoProps (_app.tsx)

Hi everyone.
The link is broken. Thanks

Hi. As discussed with @Urigo I will be working on a PR to contributor docs for anyone who wants to contribute to the OSS projects from The Guild making them comfortable when they start (like me 😅)

While the process is same for all OSS projects, all of them follow a different set of standards, conventions, processes and also have a set criteria for people to transition from contributors to maintainers (like you guys discussed in graphqljs repo). It is better to have all of them documented in one place and we can link it in all the repos.

While the workflow remains similar for all repos, there might be some differences in the way you contribute to, for different repositories. Those instructions can be added in the repository respectively in addition to referencing the docs.

As @Urigo suggested, I have also created a google doc here: https://docs.google.com/document/d/1KwNOYcc8IdW8l-MBEHd2MPhlT8GAORkJHl7uah_x-g4/edit?usp=sharing to document my thought process as I go ahead.

One question:
Should I update the website to have the contributor docs and then send a PR to the relevant repos adding the link and custom instructions if any? I am going to document and try the instructions with the repos first hand and see if I can generalize them.

PS: Will be taking some inspirations from other OSS repos as well.

CC: @dotansimha @ardatan

Rework the platform modal into a dedicated page:

• rename "Platform" to "Ecosystem"?
• do a proposal of page content + mockup

Inspiration/drafts:

• https://www.figma.com/file/K4FrExqa4NMRiRJmAkGcFs/The-Ecosystem?node-id=0%3A1
• https://www.figma.com/file/5pLw6xaeEBWNh7JtsCmn96/TheGuild?node-id=1950%3A15309
• https://res.cloudinary.com/urigo/image/upload/v1649860140/Screenshot_2022-04-13_at_17.28.44_ij2y67.png
• https://www.notion.so/theguildoss/Website-feedback-Charly-36f068c58aba4ee5ab9e62742f79f369#a07b1a54634549af9b4733a744835b6c

cc @notrab

Hi, thanks for all the great tools around graphql. I really like them.

Currently, I use the codegen plugins to create the react hooks and use it in my app.

I want to switch to the new approach :"Unleash the power of Fragments with GraphQL Codegen"

Is there a possibility to have both concepts working at the same time ?
I want to create the new queries with the new concept and move the old ones step by step to the new concept.

Thanks in advance.
Regards
Holger

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency @next/bundle-analyzer to v14

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @theguild/eslint-config to v0.11.9
• chore(deps): update dependency @theguild/tailwind-config to v0.4.2
• chore(deps): update dependency @types/react to v18.3.2
• chore(deps): update dependency prettier-plugin-tailwindcss to v0.5.14
• chore(deps): update dependency tsx to v4.10.1
• chore(deps): update dependency wrangler to v3.55.0
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency remark-mdx to v3
• chore(deps): update dependency to-vfile to v8
• chore(deps): update prettier (major) (@theguild/prettier-config, prettier)
• chore(deps): update remark (major) (remark-lint-no-multiple-toplevel-headings, remark-parse, remark-preset-lint-consistent, remark-preset-lint-markdown-style-guide, remark-preset-lint-recommended, remark-stringify, unified-lint-rule)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

When visiting https://www.the-guild.dev/blog/how-not-to-learn-graphql for the first time the website will first be opened in light mode (aka cause severe eye damage at night) and then switch to dark mode.

The flashing should not happen.

At the end of an article we shall have a list of teasers that link to related content.

We could re-use the existing teaser component for this

The logic could be:

• Priority 1: Choose articles the author explicitly defined in the meta

  export const meta = {
    title: 'How not to learn GraphQL',
    author: 'charlypoly',
    tags: ['graphql'],
    date: '2022-02-14',
    description:
      'A guide to avoid common learning biases and misconceptions around GraphQL',
    thumbnail: '/blog-assets/how-not-to-learn-graphql/preview.png',
    image: '/blog-assets/how-not-to-learn-graphql/cover.png',
    // RELEVANT CONFIG HERE
    relatedArticles: ['article-slug-a', 'article-slug-b']
  }

• Priority 2: Choose random articles that match the same tag as the article.

after clicking on the nav bar buttons, box-shadow appears

this PR fix helix logo but breaks modal

Broken routing all the way.

Hi. As discussed with @Urigo , filing this issue to work on multi-site search with Algolia for all the websites maintained by The Guild.

After thinking a bit, I am planning to stick with multiple indexes (as used now) with one index for every project, but still search through them all in search (a.k.a multi-index search)

I did look at references on how to do this, and these are some resources I found:

• https://www.algolia.com/doc/api-reference/api-methods/multiple-queries/
• https://codesandbox.io/s/github/algolia/doc-code-samples/tree/isjs-v4/InstantSearch.js/multi-index-hits
• https://www.algolia.com/doc/guides/sending-and-managing-data/prepare-your-data/in-depth/choosing-between-one-or-more-indices/
• https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/react/

Will raise a PR after testing it out properly. If my assumption is right, there should be no change to the indexing in algolia, but just a change in the client side. Will confirm.

Steps

• Complete a POC with Multi-site search using Algolia
• Apply for Algolia Open Source
• Add config to index all websites as required
• Change Docusaurus Algolia Search component
  • Allow different base URLs in the same search
  • Indicate the results coming from different websites
• Send PR to all repos for Multi-site search
  • GraphQL Codegen (dotansimha/graphql-code-generator#5502)
  • GraphQL Config (kamilkisiela/graphql-config#630)
  • GraphQL Mesh (ardatan/graphql-mesh#1568)
  • GraphQL Tools (ardatan/graphql-tools#2570)
  • GraphQL Modules (Urigo/graphql-modules#1560)
• Configure the indexer to run on the Github actions pipeline as suggested

metadata is {}, that's why it fails https://github.com/the-guild-org/the-guild-website/runs/4581400459?check_suite_focus=true

In the getting started page, if you click on React guide link it will open a broken page 404

Description
CORS error. Blocked search requests.

To Reproduce:
Try searching on the guild website

After switching from our Image component to css background-image: url(..) all images are loaded (see /blog page). Let's get it lazy-loaded again and add placeholders (?lqip).

Can you include examples on how to set up mock properties for unit testing components that rely on fragments? The patterns I'm coming up with are brutally complex, and the graphql-codegen-typescript-mock-data plugin doesn't create mocks for fragments. I may be missing something very straightforward, but I can't find any documentation on how to easily mock out fragments when using the types generated by this tool.

for example, a simple component and a simple fragment:

// component
export const BirthdayNote_User = graphql(`
  fragment BirthdayNote_User on User {
    id
    birthdate
  }
`);

const BirthdayNote: React.FC<{ user: FragmentType<typeof BirthdayNote_User> }> = (props) => { ...etc }

result on this extraordinarily convoluted setup for a mock property:

const baseUser: Pick<User, 'id' | 'birthdate'> = { // because it's fragment data, and other User fields are required for the User type
  id: '1234',
  birthdate: 'Oct 3 2002'
}
const userProp: FragmentType<typeof BirthdayNote_UserFragment> = {
  ...baseUser, // this is the data that will actually be used by the component after running through `useFragment`, which just seems to return the second parameter as is anyways
  ' $fragmentRefs': { // this is necessary to fulfill the `FragmentType` type definition on the property
    BirthdayNote_UserFragment: {
      ...baseUser,
      ' $fragmentName': 'BirthdayNote_UserFragment'
    }
};

it('renders the birthday', () => {
  render(<BirthdayNote user={userProp} />);
  // some assertions here
});

https://the-guild.dev/blog/graphql-codegen-best-practices#name-your-operations

This is an artifact of docusaurus, we should replace it with new components.

and rename package.json#name to website

so after pnpm --filter website dev will works

• The following grey seems to be a bit of a “harsh transition” from the white above
  maybe we could try a lighter grey here
  

• use next-sitemap
  https://github.com/the-guild-org/the-guild-website/pull/584/files#r800423452

Extend below configs:

• eslint:recommended
• plugin:@typescript-eslint/recommended
• next
• prettier

Great article! Thanks!
I'm trying to implement the code generation in a micro frontend app and getting errors.

• Please help me - open issue at apollo-angular
• Stackoverflow question

Regards

I will be working on a shared template for all the Guild websites as shared by @Urigo

Design mockup as shared with me: https://www.figma.com/file/5pLw6xaeEBWNh7JtsCmn96/TheGuild?node-id=0%3A1

Steps:

• Move all websites away from Docusaurus to Next.js
• Prepare a common skeleton template for the websites
  • Header
  • Sub Header
  • Footer
  • Content Area
• Make sure that the template is responsive
• Apply styling, theme and color scheme as suggested in the mockup
• Adapt Docusaurus to fit within this template
• Apply this template to all Guild websites and update content of every website to fit into the new layout
  • The Guild Website
  • GraphQL Codegen
  • GraphQL Tools
  • GraphQL Config
  • GraphQL Inspector
  • GraphQL Mesh
  • GraphQL Modules

Questions I currently have

• How would Docusaurus styling work with this template? Redesigning Docusaurus to match this template would be a tedious task due its own set of conventions, components and design schemes. I will try adapting it to this style or embed it within this skeleton if it turns out to be complicated. Will let you know how this goes.
• Should I start this from scratch or iterate from the existing Guild website? I am not sure, but I feel iterating from the guild website would be better since this is going to be more of a change in template and styling, but not sure so far since the current design and the new mockup looks a lot different. Not sure how much I can reuse.
• Docusaurus comes with its own set of menu items for the docs which turns into hamburger menu in mobile devices and from this design there will be another menubar on top which will again turn into a hamburger menu thus creating overlapping hamburger icons since both header and subheader has its own menu items which are unrelated. Any idea on how you will want to tackle this in mobile devices? Will know more about this as we go on.

I am pretty sure there might be a lot more questions as I go along. Will update the same issue with the details. Do let me know if I missed something. Will iterate as I go along.

CC: @dotansimha @ardatan @Urigo

The problem: dark text on dark background in the /open-source page.

Solution? Maybe currentColor to drive the text color in these SVGs. Currently we use <img src="logo.svg" />, we could switch to use SVG directly.

We use these logos on other websites so we should make it in a non-breaking way...

See:

• https://www.the-guild.dev/blog/tag/codegen
• https://www.the-guild.dev/blog/tag/envelop

The list of tags is changing, i guess because we apply filtering for the posts before building the filters list? 🤔

We have a lot of GIFs and one is 28mb :) I know it looks nice but come on...
This should speed up the build process.

Results are not nice when searching on https://envelop.dev, https://swift-graphql.com, ....

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

This link is referenced in this article: https://medium.com/saleor/creating-a-type-safe-react-application-with-typescript-using-the-saleor-graphql-api-435059ea55f5

see https://the-guild.dev/blog/graphql-codegen-best-practices#watch-mode

Linked from: https://github.com/prisma-labs/graphql-request