search

Shopify / quilt

[⚠️ Deprecated] A loosely related set of packages for JavaScript/TypeScript projects at Shopify
MIT License
1.7k stars 220 forks source link

`graphql-fixtures` no longer works in non-node environments. #2393

Open KevinMind opened 2 years ago

KevinMind commented 2 years ago

Overview

graphql-fixtures is used primarily in jest/node environments, however we have been using the library to generate mock data for graphql resolvers in storybooks. This allows us to mock graphql queries with real data that can render in stories which help us validate visual changes to the code.

It seems that a transient dependency of graphql-fixtures -> graphql-tool-utilities -> apollo-codegen-core was bumped and this introduced breaking changes when executing in a browser.

It seems the issue is somehow related to node APIs not being defined, so I thought maybe this was a webpack 4 -> 5 issue, but I can reproduce the issue in webpack4 and webpack5 so seems unrelated.

Being able to use graphql fixtures in storybooks is a game changer. Instead of needing to define a lot of static json files with huge data payloads, you can provide simple functions and share fixtures from stories and tests.

NOTE: looking at the apollo-codegen-core repository, it seems that this project is depracated by apollo and they recommend using https://www.graphql-code-generator.com/ instead. Is this something on our radar? We have several quilt packages somewhat related to graphql codegen that could theoretically be replaced/enhanced by this open source toolset.

Consuming repo

https://github.com/Shopify/merchant-to-merchant https://github.com/Shopify/handshake-web

KevinMind commented 2 years ago

Relating to the note about apollo-codegen-core it seems there is a third dependency in this tree which is graphql-typescript-definitions which is also using the apollo codegen repo.

I haven't looked too far into it but it almost seems like we could achieve a lot of what we are doing with graphql-fixtures graphql-tools-utilities and graphql-typescript-definitions with graphql-codegen and a custom plugin/preset.

I'm curious what is our opinion on maintaining in house tooling that is built on deprecated open source? Do we have a plan for migrating from apollo-codegen to graphql-codegen or are there any current thoughts on what this might look like?

Since we are a small non-core repository it would be easy to migrate our codebase to graphql-codgen but I would rather stick to shopify tooling where possible and such a migration would likely be huge for core repos.

BPScott commented 2 years ago

graphql-fixtures was never intended to be used in browser environments. I've saw cases where it is in the past, and what ends up happening is it pulls the entire schema you're using into the JS bundle. For core that's about 7MB of JSON which is a horrible user experience. IT sounds like these days it would also force you to pull in polyfills of node built-ins, which shall further bloat the bundle.

Using data from graphql-fixtures for UI testing also feels weird as it shall generate random data, which will would change each time you reload a given story and thus cause the UI or behaviour to change. I imagine you'd want to fix the data so that you always render the same content in your story. At which point there doesn't feel like there's any difference between specifying an object and using graphql-fixtures - you'd have to specify fixed data either way, unless your component's props requires a bunch of values that are not used for the purpose of rendering the story - at which point it seems like the component's props should be updated to only describe upon what it needs.

BPScott commented 2 years ago

I haven't looked too far into it but it almost seems like we could achieve a lot of what we are doing with graphql-fixtures graphql-tools-utilities and graphql-typescript-definitions with graphql-codegen and a custom plugin/preset.

I agree. The graphql tooling in this codebase predates any community tooling. We didn't use graphql-codegen et al at the time because it didn't exist. Now that community tooling around graphql has gotten much better I would be very interested in seeing if we can leverage community tools now that they exist instead of providing our own tools.

I would prefer it if we leveraged existing tools instead of having to maintain our own.

I’d like to tackle some of this work after we get Apollo3 rolled out in in #2302 and https://github.com/Shopify/web/pull/68796 (otherwise we end up with too many breaking changes at once). It’s a slow process though.

I've created #2397 to document these thoughts