Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding collections support #57

Merged
merged 7 commits into from
May 22, 2022
Merged

Adding collections support #57

merged 7 commits into from
May 22, 2022

Conversation

MohamedBassem
Copy link
Contributor

This PR adds support for collections to the app. It:

  1. Adds a new button to the toolbar to go to the collections page.
  2. In the collections page, we have infinte scrolling of collections.
  3. Clicking on a collections renders the product list page with the items in that collection.

Given the similarities between the product list and collection product list queries, I extracted it into a fragment. I tried to adhere to the same code pattern used in this repo as much as possible.

Fixes #56

@vercel
Copy link

vercel bot commented May 8, 2022

Someone is attempting to deploy a commit to a Personal Account owned by @Maxvien on Vercel.

@Maxvien first needs to authorize it.

@vercel
Copy link

vercel bot commented May 9, 2022 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
next-shopify-storefront ✅ Ready (Inspect) Visit Preview May 17, 2022 at 5:19AM (UTC)

@VienDinhCom
Copy link
Owner

Hi @MohamedBassem

This is the build log I got from Vercel. It seems we have bugs in graphql queries. Could you check it again?

Thank you for your contribution. 👍

[12:41:04.858] Cloning github.com/Maxvien/next-shopify-storefront (Branch: v2, Commit: 208933d)
[12:41:05.269] Cloning completed: 410.497ms
[12:41:06.400] No Build Cache available
[12:41:06.684] Running "vercel build"
[12:41:07.244] Vercel CLI 24.2.0 build (beta) — https://vercel.com/feedback
[12:41:07.489] Installing dependencies...
[12:41:07.858] yarn install v1.22.17
[12:41:07.951] [1/4] Resolving packages...
[12:41:08.385] [2/4] Fetching packages...
[12:41:38.632] [3/4] Linking dependencies...
[12:41:38.635] warning " > @emotion/[email protected]" has unmet peer dependency "@babel/core@^7.0.0".
[12:41:38.635] warning "@emotion/styled > @emotion/babel-plugin > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
[12:41:38.639] warning " > [email protected]" has unmet peer dependency "prop-types@^15.6.0".
[12:41:38.647] warning "apollo > apollo-language-server > @apollographql/[email protected]" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
[12:41:38.648] warning "apollo > apollo-language-server > @apollographql/graphql-language-service-interface > @apollographql/[email protected]" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
[12:41:38.648] warning "apollo > apollo-language-server > @apollographql/graphql-language-service-interface > @apollographql/[email protected]" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
[12:41:38.649] warning "apollo > apollo-language-server > @apollographql/graphql-language-service-interface > @apollographql/[email protected]" has incorrect peer dependency "graphql@^0.12.0 || ^0.13.0 || ^14.0.0".
[12:42:05.411] [4/4] Building fresh packages...
[12:42:07.091] Done in 59.24s.
[12:42:07.135] Detected Next.js version: 11.1.3
[12:42:07.136] Running "yarn run build"
[12:42:07.441] yarn run v1.22.11
[12:42:07.484] $ nps -s build
[12:42:07.838] nps is executing `graphql.build` : nps graphql.download && nps graphql.codegen
[12:42:08.021] nps is executing `graphql.download` : apollo client:download-schema -c src/services/shopify/apollo.config.js src/services/shopify/schema.gql
[12:42:08.775] Loading Apollo Project [started]
[12:42:10.167] Loading Apollo Project [completed]
[12:42:10.167] Saving schema to src/services/shopify/schema.gql [started]
[12:42:10.180] Saving schema to src/services/shopify/schema.gql [completed]
[12:42:10.359] nps is executing `graphql.codegen` : graphql-codegen -c src/services/shopify/codegen.config.js
[12:42:11.062] [05:42:11] Parse configuration [started]
[12:42:11.063] [05:42:11] Parse configuration [completed]
[12:42:11.064] [05:42:11] Generate outputs [started]
[12:42:11.064] [05:42:11] Generate /vercel/path0/src/services/shopify/generated.ts [started]
[12:42:11.065] [05:42:11] Load GraphQL schemas [started]
[12:42:11.231] [05:42:11] Load GraphQL schemas [completed]
[12:42:11.231] [05:42:11] Load GraphQL documents [started]
[12:42:11.243] [05:42:11] Load GraphQL documents [completed]
[12:42:11.243] [05:42:11] Generate [started]
[12:42:11.310] [05:42:11] Generate [failed]
[12:42:11.311] [05:42:11] → GraphQL Document Validation failed with 2 errors;
[12:42:11.311]   Error 0: GraphQLDocumentError: Cannot query field "url" on type "Image". Did you mean "src"?
[12:42:11.311]     at /vercel/path0/src/services/shopify/graphql/product.gql:82:11
[12:42:11.312] 
[12:42:11.312] Error 1: GraphQLDocumentError: Cannot query field "collection" on type "QueryRoot". Did you mean "collections"?
[12:42:11.312]     at /vercel/path0/src/services/shopify/graphql/product.gql:95:3
[12:42:11.312] [05:42:11] Generate /vercel/path0/src/services/shopify/generated.ts [failed]
[12:42:11.313] [05:42:11] → GraphQL Document Validation failed with 2 errors;
[12:42:11.313]   Error 0: GraphQLDocumentError: Cannot query field "url" on type "Image". Did you mean "src"?
[12:42:11.313]     at /vercel/path0/src/services/shopify/graphql/product.gql:82:11
[12:42:11.313] 
[12:42:11.313] Error 1: GraphQLDocumentError: Cannot query field "collection" on type "QueryRoot". Did you mean "collections"?
[12:42:11.313]     at /vercel/path0/src/services/shopify/graphql/product.gql:95:3
[12:42:11.314] [05:42:11] Generate outputs [failed]
[12:42:11.314] Something went wrong
[12:42:11.322] The script called "graphql.codegen" which runs "graphql-codegen -c src/services/shopify/codegen.config.js" failed with exit code 1 https://github.com/sezna/nps/blob/master/other/ERRORS_AND_WARNINGS.md#failed-with-exit-code
[12:42:11.326] The script called "graphql.build" which runs "nps graphql.download && nps graphql.codegen" failed with exit code 1 https://github.com/sezna/nps/blob/master/other/ERRORS_AND_WARNINGS.md#failed-with-exit-code
[12:42:11.346] error Command failed with exit code 1.
[12:42:11.346] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[12:42:11.369] Error! Command "yarn run build" exited with 1
[12:42:11.380] Error: Command "vercel build" exited with 1

@MohamedBassem
Copy link
Contributor Author

That's a bit weird. Does your vercel build run against some outdated API or something?

If you check shopify's APIs, you'll find that the Image object contains url (https://shopify.dev/api/admin-graphql/2022-04/objects/Image#field-image-url) and that src is deprecated (https://shopify.dev/api/admin-graphql/2022-04/objects/Image#field-image-src).

I noticed that whenever I run yarn dev in my repo, the generated schema file gets updated with a new version, maybe that's the problem?

@VienDinhCom
Copy link
Owner

VienDinhCom commented May 15, 2022 •
edited
Loading

Hi @MohamedBassem

In this project we use Storefront API not Admin API. You can check the documentation here:

https://shopify.dev/api/storefront/2021-07/queries/collections

@MohamedBassem
Copy link
Contributor Author

Hello, if you check the latest version of the store front api, you’ll also find the new attributes (
https://shopify.dev/api/storefront/2022-04/objects/Image#field-image-url). Is this project by any chance pinned to a particular version?

@VienDinhCom
Copy link
Owner

VienDinhCom commented May 16, 2022 •
edited
Loading

Hi @MohamedBassem This project is using version 2021-07 in the URL below.

https://shopify.dev/api/storefront/2021-07/queries/collections

You can also see it in this file: https://github.com/Maxvien/next-shopify-storefront/blob/v2/.env.example

@MohamedBassem
Copy link
Contributor Author

@Maxvien ok I changed the PR to use version 2021-07, please have another look.

@VienDinhCom
Copy link
Owner

LGTM. Thank you @MohamedBassem

@VienDinhCom VienDinhCom merged commit 0a91f70 into VienDinhCom:v2 May 22, 2022
@VienDinhCom
Copy link
Owner

@MohamedBassem You can see the result here: https://next-shopify-storefront.vercel.app/collections

I also filtered out empty collections to make the UI better.

@MohamedBassem
Copy link
Contributor Author

MohamedBassem commented Oct 11, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Support for collections
2 participants
@MohamedBassem @VienDinhCom