Bump: amplify-js/packages/api-graphql graphql dependency to v16

[charlieforward9]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

api

Backend

None

Environment information

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Memory: 62.73 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 17.4.1
  npmPackages:
    @amiceli/vitest-cucumber: 3.2.5 => 3.2.5 
    @aws-crypto/sha256-js: ^5.2.0 => 5.2.0 (3.0.0)
    @fortawesome/fontawesome-svg-core: ^6.5.1 => 6.5.1 
    @fortawesome/free-solid-svg-icons: ^6.4.0 => 6.5.1 
    @fortawesome/react-fontawesome: ^0.2.0 => 0.2.0 
    @graphql-codegen/cli: ^5.0.2 => 5.0.2 
    @graphql-codegen/typescript-rtk-query: ^3.1.1 => 3.1.1 
    @headlessui/react: ^1.7.17 => 1.7.17 
    @mapbox/shp-write: ^0.4.3 => 0.4.3 
    @reduxjs/toolkit: ^2.2.1 => 2.2.1 
    @reduxjs/toolkit-query:  1.0.0 
    @reduxjs/toolkit-query-react:  1.0.0 
    @reduxjs/toolkit-react:  1.0.0 
    @rtk-query/graphql-request-base-query: ^2.3.1 => 2.3.1 
    @tanstack/query-codemods:  4.24.3 
    @tanstack/react-query: ^5.20.5 => 5.20.5 
    @tanstack/react-table: ^8.16.0 => 8.16.0 
    @tanstack/react-virtual: ^3.0.4 => 3.0.4 
    @testing-library/jest-dom: ^6.4.2 => 6.4.2 
    @testing-library/react: ^14.2.1 => 14.2.1 
    @testing-library/user-event: ^14.5.2 => 14.5.2 
    @turf/area: ^7.0.0-alpha.113 => 7.0.0-alpha.113+876702a45 
    @turf/bbox: ^7.0.0-alpha.113 => 7.0.0-alpha.113+876702a45 
    @turf/boolean-point-in-polygon: ^7.0.0-alpha.113 => 7.0.0-alpha.113+876702a45 
    @turf/helpers: ^7.0.0-alpha.113 => 7.0.0-alpha.113+876702a45 
    @types/downloadjs: ^1.4.3 => 1.4.6 
    @types/leaflet: ^1.9.3 => 1.9.8 
    @types/node: ^20.11.19 => 20.12.7 
    @types/react: ^18.3.1 => 18.3.1 
    @types/react-dom: ^18.0.3 => 18.2.18 
    @typescript-eslint/eslint-plugin: ^7.8.0 => 7.8.0 
    @typescript-eslint/parser: ^7.8.0 => 7.8.0 
    @vitejs/plugin-react-swc: ^3.6.0 => 3.6.0 
    @vitest/coverage-v8: ^1.5.3 => 1.5.3 
    aws-amplify: ^6.0.3 => 6.0.9 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    concurrently: ^8.2.2 => 8.2.2 
    cross-env: ^7.0.3 => 7.0.3 
    debounced-drag:  1.0.0 
    dotenv: ^16.3.1 => 16.3.1 
    downloadjs: ^1.4.7 => 1.4.7 
    eslint: ^8.47.0 => 8.56.0 
    eslint-import-resolver-typescript: ^3.6.1 => 3.6.1 
    eslint-plugin-import: ^2.29.1 => 2.29.1 
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 
    eslint-plugin-react-refresh: ^0.4.5 => 0.4.5 
    eslint-plugin-testing-library: ^6.2.2 => 6.2.2 
    graphql: ^16.8.1 => 16.8.1 (15.8.0)
    jsdom: ^22.1.0 => 22.1.0 
    leaflet: ^1.9.4 => 1.9.4 
    leaflet-draw: ^1.0.4 => 1.0.4 
    msw: ^2.1.14 => 2.2.14 
    notistack: ^3.0.1 => 3.0.1 
    postcss: ^8.4.31 => 8.4.38 
    prettier: ^3.1.1 => 3.1.1 
    prettier-plugin-tailwindcss: ^0.5.14 => 0.5.14 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.2.0 => 18.2.0 
    react-leaflet: ^4.2.1 => 4.2.1 
    react-leaflet-draw: ^0.20.4 => 0.20.4 
    react-redux: ^9.1.0 => 9.1.0 
    react-test-renderer: ^18.2.0 => 18.2.0 
    react-to-print: ^2.14.15 => 2.14.15 
    react-use-is-online: ^1.3.0 => 1.3.0 
    recharts: ^2.7.3 => 2.10.3 
    redux: ^5.0.1 => 5.0.1 
    redux-todos-with-undo-example:  0.0.0 
    redux-undo: ^1.0.1 => 1.1.0 
    swr: ^2.2.4 => 2.2.4 
    tailwindcss: ^3.3.2 => 3.4.0 
    typescript: ^5.4.5 => 5.4.5 
    vite: ^5.2.11 => 5.2.11 
    vitest: ^1.5.3 => 1.5.3 
  npmGlobalPackages:
    @aws-amplify/cli: 10.2.1
    corepack: 0.20.0
    gh-pages: 3.2.3
    graphql-cli: 4.1.0
    n: 9.1.0
    nodemon: 2.0.13
    npm: 10.5.0
    stable: 0.1.8
    tls-test: 1.0.0
    ts-node: 10.9.1

Describe the bug

I am trying to put my generated Amplify API together with RTK Query for the convenience of codegen'ed hooks.

I am creating the baseQueryFn, which requires the generateClient() to accept a query - DocumentNode.

When I import the DocumentNode type from graphql to satisfy my TS linter, I get a type error. (See log output)

It appears that there is a difference in the way graphql 15.8.0 and 16.8.1 define the DocumentNode... with v17 around the corner, it seems like a good time to create an upgraded version.

Expected behavior

I would expect to see the two DocumentNode objects match.

Reproduction steps

1. Install @reduxjs/toolkit, @aws-amplify/api, and @rtk-query/graphql-request-base-query. Make sure you have a typescript linter running
2. Paste the snippet
3. Notice the warning on line 16 where the query field is assigned.

Code Snippet

import { BaseQueryFn, createApi } from "@reduxjs/toolkit/query/react";
import { generateClient } from "@aws-amplify/api";
import { ErrorResponse } from "@rtk-query/graphql-request-base-query/dist/GraphqlBaseQueryTypes";
import { DocumentNode } from "graphql";

export const graphqlRequestBaseQuery = <E = ErrorResponse>(): BaseQueryFn<
  { document: string | DocumentNode; variables?: unknown },
  unknown,
  E
> => {
  const client = generateClient();

  return async ({ document, variables }) => {
    try {
      const { data, errors } = await client.graphql({
        query: document,
        variables,
      });
    } catch (error) {
      throw `API Error: ${error}`;
    }
  };
};

// initialize an empty api service that we'll inject endpoints into later as needed
export const api = createApi({
  reducerPath: "graphql",
  baseQuery: graphqlRequestBaseQuery(),
  endpoints: () => ({}),
});

Log output

Type 'string | import("/Users/crich/development/github/Agroview2.0/node_modules/graphql/language/ast").DocumentNode' is not assignable to type 'string | import("/Users/crich/development/github/Agroview2.0/node_modules/@aws-amplify/api-graphql/node_modules/graphql/language/ast").DocumentNode'.
  Type 'DocumentNode' is not assignable to type 'string | DocumentNode'.
    Type 'import("/Users/crich/development/github/Agroview2.0/node_modules/graphql/language/ast").DocumentNode' is not assignable to type 'import("/Users/crich/development/github/Agroview2.0/node_modules/@aws-amplify/api-graphql/node_modules/graphql/language/ast").DocumentNode'.
      Types of property 'loc' are incompatible.
        Type 'import("/Users/crich/development/github/Agroview2.0/node_modules/graphql/language/ast").Location | undefined' is not assignable to type 'import("/Users/crich/development/github/Agroview2.0/node_modules/@aws-amplify/api-graphql/node_modules/graphql/language/ast").Location | undefined'.
          Type 'import("/Users/crich/development/github/Agroview2.0/node_modules/graphql/language/ast").Location' is not assignable to type 'import("/Users/crich/development/github/Agroview2.0/node_modules/@aws-amplify/api-graphql/node_modules/graphql/language/ast").Location'.
            The types returned by 'startToken.toJSON()' are incompatible between these types.
              Type '{ kind: TokenKind; value?: string | undefined; line: number; column: number; }' is not assignable to type '{ kind: TokenKindEnum; value: string | undefined; line: number; column: number; }'.
                Property 'value' is optional in type '{ kind: TokenKind; value?: string | undefined; line: number; column: number; }' but required in type '{ kind: TokenKindEnum; value: string | undefined; line: number; column: number; }'.

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

Hi @charlieforward9 👋 thank you for raising this issue.

I do see there are some type errors when following the reproduction steps. I'll bring this to the team for consideration on upgrading the graphql version

[charlieforward9]

This seems like a relatively simple chore that I would appreciate prioritizing. Would this be an issue with the current roadmap?