feat: add gatsby v5 support (#259)

* chore: add graphql 16 and gatsby v5 support

* fix: update test-e2e deps

* chore: ignore unexpected types in helper test

* chore(release): 2.0.8-rc.1

* chore: update github actions and templates

Co-authored-by: Dave Marsland <dave@finematter.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -6,7 +6,7 @@ about: Create a report to help us improve
 **Before you submit:**
 
 - [ ] Please read the [contributing guidelines](CONTRIBUTING.md)
-- [ ] Please search through the existing issues (both open AND closed) to see if your issue has been discussed before. Github issue search can be used for this: https://github.com/imgix/vue/issues?utf8=%E2%9C%93&q=is%3Aissue
+- [ ] Please search through the existing issues (both open AND closed) to see if your issue has been discussed before. Github issue search can be used for this: https://github.com/imgix/gatsby/issues?utf8=%E2%9C%93&q=is%3Aissue
 - [ ] Please ensure the problem has been isolated and reduced. This link explains more: http://css-tricks.com/6263-reduced-test-cases/
 
 **Describe the bug**
@@ -15,13 +15,13 @@ A clear and concise description of what the bug is. Please strive to reach the *
 **To Reproduce**
 A bug is a _demonstrable problem_ that is caused by the code in the repository. Thus, the contributors need a way to reproduce your issue - if we can't reproduce your issue, we can't help you! Also, please be as detailed as possible.
 
-[a link to a codesandox or repl.it; here is a link to a codesandbox with @imgix/vue installed which can be forked: https://codesandbox.io/s/vue-imgix-base-codesandbox-bhz8n]
+[a link to a codesandox or repl.it]
 
 [alternatively, please provide a code example]
 
 ```js
 // A *self-contained* demonstration of the problem follows...
-// This should be able to be dropped into a file with @imgix/vue installed and just work
+// This should be able to be dropped into a file with @imgix/gatsby installed and just work
 ```
 
 Steps to reproduce the behaviour:
@@ -39,7 +39,7 @@ If applicable, add screenshots to help explain your problem.
 
 **Information:**
 
-- @imgix/vue version: [e.g. v1.0]
+- @imgix/gatsby version: [e.g. v1.0]
 - browser version: [include link from [https://www.whatsmybrowser.org/](https://www.whatsmybrowser.org/) or details about the OS used and browser version]
 
 **Additional context**

.github/ISSUE_TEMPLATE/feature_request.md

@@ -6,7 +6,7 @@ about: Suggest an idea for this project
 **Before you submit:**
 
 - [ ] Please read the [contributing guidelines](CONTRIBUTING.md)
-- [ ] Please search through the existing issues (both open AND closed) to see if your feature has already been discussed. Github issue search can be used for this: https://github.com/imgix/vue/issues?utf8=%E2%9C%93&q=is%3Aissue
+- [ ] Please search through the existing issues (both open AND closed) to see if your feature has already been discussed. Github issue search can be used for this: https://github.com/imgix/gatsby/issues?utf8=%E2%9C%93&q=is%3Aissue
 - [ ] Please take a moment to find out whether your idea fits with the scope and aims of the project
 
 **Is your feature request related to a problem? Please describe.**

.github/ISSUE_TEMPLATE/question.md

@@ -6,7 +6,7 @@ about: Ask a question about the project
 **Before you submit:**
 
 - [ ] Please read the [contributing guidelines](CONTRIBUTING.md)
-- [ ] Please search through the existing issues (both open AND closed) to see if your question has already been discussed. Github issue search can be used for this: https://github.com/imgix/vue/issues?utf8=%E2%9C%93&q=is%3Aissue
+- [ ] Please search through the existing issues (both open AND closed) to see if your question has already been discussed. Github issue search can be used for this: https://github.com/imgix/gatsby/issues?utf8=%E2%9C%93&q=is%3Aissue
 
 **Question**
 A clear and concise description of your question

.github/workflows/add-pr-to-project.yml

@@ -1,4 +1,4 @@
-name: Add needs-review and size/XL pull requests to projects
+name: Add PR to Project
 
 on:
   pull_request:

CHANGELOG.md

@@ -1,3 +1,10 @@
+### [2.0.8-rc.1](https://github.com/imgix/gatsby/compare/v2.0.7...v2.0.8-rc.1) (2023-01-11)
+
+
+### Bug Fixes
+
+* update test-e2e deps ([4599f1d](https://github.com/imgix/gatsby/commit/4599f1dc56c1fcdb17a61d298b25956fe9c5e898))
+
 ### [2.0.7](https://github.com/imgix/gatsby/compare/v2.0.6...v2.0.7) (2022-10-03)
 
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.7",
+  "version": "2.0.8-rc.1",
   "name": "@imgix/gatsby",
   "description": "The official imgix plugin to apply imgix transformations and optimisations to images in Gatsby at build-time or request-time",
   "author": "Frederick Fogerty <frederick@imgix.com>",
@@ -36,13 +36,13 @@
     "test": "run-s test:unit test:e2e:ci"
   },
   "peerDependencies": {
-    "gatsby": "^2 || ^3 || ^4",
+    "gatsby": "^2 || ^3 || ^4 || ^5",
     "gatsby-image": "^2 || ^3",
     "gatsby-plugin-image": "^1 || ^2"
   },
   "resolutions": {
     "chalk": "^4",
-    "graphql": "15.8.0",
+    "graphql": "^16.6.0",
     "graphql-compose": "^9.0.0",
     "webpack": "5.74.0"
   },
@@ -77,21 +77,20 @@
     "conventional-changelog-conventionalcommits": "4.6.3",
     "cross-env": "7.0.3",
     "eslint": "8.22.0",
-    "gatsby": "4.21.1",
-    "gatsby-image": "3.11.0",
-    "gatsby-plugin-image": "2.21.0",
-    "gatsby-plugin-sharp": "4.21.0",
-    "gatsby-source-filesystem": "4.21.1",
-    "graphql": "15.8.0",
-    "graphql-anywhere": "4.2.8",
+    "gatsby": "5.3.2",
+    "gatsby-image": "^3.11.0",
+    "gatsby-plugin-image": "3.3.2",
+    "gatsby-plugin-sharp": "5.3.2",
+    "gatsby-source-filesystem": "5.3.1",
+    "graphql": "^16.6.0",
     "graphql-tag": "2.12.6",
     "is-base64": "1.1.0",
     "jest": "27.5.1",
     "marked": "4.1.1",
     "msync": "2.5.10",
     "prettier": "2.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "read-pkg": "5.2.0",
     "semantic-release": "19.0.5",
     "ts-jest": "27.1.5",

src/common/constants.ts

@@ -1 +1 @@
-export const VERSION = '2.0.7';
+export const VERSION = '2.0.8-rc.1';

src/modules/gatsby-plugin/gatsby-node.ts

@@ -235,7 +235,7 @@ function createRootObjectType(
         },
         args: {
           url: {
-            type: GraphQLNonNull(GraphQLString),
+            type: new GraphQLNonNull(GraphQLString),
             description:
               'The path of the image to render. If using a Web Proxy Source, this must be a fully-qualified URL.',
           },

test/dev-and-e2e/package.json

@@ -5,7 +5,7 @@
   "version": "0.1.6",
   "author": "",
   "dependencies": {
-    "@imgix/gatsby": "^1.6.13",
+    "@imgix/gatsby": "^2.0.0",
     "gatsby": "4.21.1",
     "gatsby-image": "3.11.0",
     "gatsby-plugin-image": "2.21.0",

test/dev-and-e2e/yarn.lock

@@ -2024,6 +2024,24 @@
     ramda "^0.27.1"
     read-pkg-up "^7.0.1"
 
+"@imgix/gatsby@^2.0.0":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@imgix/gatsby/-/gatsby-2.0.7.tgz#6c36d892ba84d24caa6cc2a7078f870622cae08d"
+  integrity sha512-xnYzmhCiJcqBmvTfZ/oCIwk2HORlnwGtH2laC387n5p0jjf+w7xhc7UnjQPr5FkVWF3EB+jQ0tfIeBBPBcUV/A==
+  dependencies:
+    "@imgix/js-core" "3.6.0"
+    camel-case "^4.1.2"
+    common-tags "^1.8.0"
+    debug "^4.3.1"
+    graphql-compose "^9.0.0"
+    imgix-url-params "^11.11.2"
+    joi "^17.6.0"
+    jsuri "^1.3.1"
+    lodash.get "^4.4.2"
+    node-fetch "^2.6.0"
+    ramda "^0.27.1"
+    read-pkg-up "^9.0.0"
+
 "@imgix/js-core@3.1.3":
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/@imgix/js-core/-/js-core-3.1.3.tgz#9c26366f84f59e6c238c41455f45aacdf04862b7"
@@ -2032,6 +2050,15 @@
     js-base64 "~2.6.0"
     md5 "^2.2.1"
 
+"@imgix/js-core@3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@imgix/js-core/-/js-core-3.6.0.tgz#fea27da03696264fe0fa4d6f74e928b9e17fc764"
+  integrity sha512-00qsHfyk7HvSj5NJdLA5O2QeBUVPM0khpO0qQvyMBmVP9aZaYJWkMd1IXQm0TUvcI1+Ja2mvdPzRYULFCiQBTg==
+  dependencies:
+    js-base64 "~3.7.0"
+    md5 "^2.2.1"
+    ufo "^0.7.10"
+
 "@jest/types@^27.2.5":
   version "27.2.5"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.2.5.tgz#420765c052605e75686982d24b061b4cbba22132"
@@ -2920,6 +2947,13 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@sideway/address@^4.1.3":
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
+  integrity sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+
 "@sideway/formula@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.0.tgz#fe158aee32e6bd5de85044be615bc08478a0a13c"
@@ -7905,6 +7939,13 @@ graphql-compose@^7.25.0:
     graphql-type-json "0.3.2"
     object-path "0.11.5"
 
+graphql-compose@^9.0.0:
+  version "9.0.10"
+  resolved "https://registry.yarnpkg.com/graphql-compose/-/graphql-compose-9.0.10.tgz#1e870166deb1785761865fe742dea0601d2c77f2"
+  integrity sha512-UsVoxfi2+c8WbHl2pEB+teoRRZoY4mbWBoijeLDGpAZBSPChnqtSRjp+T9UcouLCwGr5ooNyOQLoI3OVzU1bPQ==
+  dependencies:
+    graphql-type-json "0.3.2"
+
 graphql-compose@^9.0.7:
   version "9.0.9"
   resolved "https://registry.yarnpkg.com/graphql-compose/-/graphql-compose-9.0.9.tgz#ca919ce61cf5ec0545e5ce123bda2051c7c78a1e"
@@ -8829,6 +8870,17 @@ joi@^17.4.0, joi@^17.4.2:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
+joi@^17.6.0:
+  version "17.7.0"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-17.7.0.tgz#591a33b1fe1aca2bc27f290bcad9b9c1c570a6b3"
+  integrity sha512-1/ugc8djfn93rTE3WRKdCzGGt/EtiYKxITMO4Wiv6q5JL1gl9ePt4kBsl1S499nbosspfctIQTpYIhSmHA3WAg==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+    "@hapi/topo" "^5.0.0"
+    "@sideway/address" "^4.1.3"
+    "@sideway/formula" "^3.0.0"
+    "@sideway/pinpoint" "^2.0.0"
+
 jpeg-js@^0.4.0:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b"
@@ -8839,6 +8891,11 @@ js-base64@~2.6.0:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
+js-base64@~3.7.0:
+  version "3.7.4"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.4.tgz#af95b20f23efc8034afd2d1cc5b9d0adf7419037"
+  integrity sha512-wpM/wi20Tl+3ifTyi0RdDckS4YTD4Lf953mBRrpG8547T7hInHNPEj8+ck4gB8VDcGyeAWFK++Wb/fU1BeavKQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -9227,7 +9284,7 @@ lodash.foreach@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
   integrity sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=
 
-lodash.get@^4:
+lodash.get@^4, lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
   integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==
@@ -12849,6 +12906,11 @@ ua-parser-js@^0.7.30:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
   integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
 
+ufo@^0.7.10:
+  version "0.7.11"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.7.11.tgz#17defad497981290383c5d26357773431fdbadcb"
+  integrity sha512-IT3q0lPvtkqQ8toHQN/BkOi4VIqoqheqM1FnkNWT9y0G8B3xJhwnoKBu5OHx8zHDOvveQzfKuFowJ0VSARiIDg==
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"

test/unit/pluginHelpers.test.ts

@@ -104,10 +104,14 @@ describe('plugin helpers', () => {
         {},
         {} as any,
       );
-
+      // TODO(LHB): remove ts-ignores here
+      // @ts-ignore
       expect(fluid.aspectRatio).toBe(aspectRatio);
+      // @ts-ignore
       expect(fixed.width / fixed.height).toBe(aspectRatio);
+      // @ts-ignore
       expect(gatsbyImageData.width).toBe(width);
+      // @ts-ignore
       expect(gatsbyImageData.height).toBe(height);
     });
   });