appsync query with filters not working - react native

[wpdas]

I'm facing issues while migrating from API.graphql to AWS AppSync SDK using AWSAppSyncClient.

All examples below work fine while using API.graphql, but, when we start to use AppSync, only simple queries works. Queries with more complex filters using appsync return an empty array.

// AppSync Client  [AWS AppSync SDK]
import { Auth } from '@aws-amplify/auth'
import AWSAppSyncClient, { AUTH_TYPE } from 'aws-appsync'
import getEnvVars from '../../environment'
const { appSync } = getEnvVars()

const getJwtToken = async () =>
  (await Auth.currentSession()).getAccessToken().getJwtToken()

const client = new AWSAppSyncClient({
  url: appSync.aws_appsync_graphqlEndpoint,
  region: appSync.aws_project_region,
  auth: {
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: getJwtToken,
  },
  disableOffline: false,
})

// CASE 1
// Simple filter using "eq"
const works = await client.query<
  ListSavedJobsQuery,
  ListSavedJobsQueryVariables
>(listSavedJobs, {
  filter: {
    userID: {
      eq: 'wenderson',
    },
  },
})

// CASE 2
// Fetch all Projects without filtering - works fine
const works2 = await client.query<
  ListJobsQuery,
  ListJobsQueryVariables
>(listJobs)

// CASE 3
// List of "or" filter - doesn't work
const doesnWork = await client.query<
  ListJobsQuery,
  ListJobsQueryVariables
>(listJobs, {
  filter: {
    or: [
      { Job: { eq: 1 } },
      { Job: { eq: 2 } },
      { Job: { eq: 3 } },
      { Job: { eq: 4 } },
      // ... and more,
    ],
  },
})

// CASE 4
// Doesn't work
const doesntWork2 = await client.query<
  ListJobsStateQuery,
  ListJobsStateQueryVariables
>(listJobsStates, {
  filter: {
    or: [{ Field: { eq: Y } }, { Office: { eq: Y } }],
  },
})

This is our current package.json content:

{
  "main": "index.ts",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "android-device-only": "expo start --localhost --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest",
    "lint": "eslint src --fix --ext .js,.ts,.tsx",
    "react-devtool": "react-devtools",
    "redux-devtool": "remotedev"
  },
  "dependencies": {
    "@aws-amplify/auth": "^3.4.16",
    "@aws-amplify/core": "^3.8.8",
    "@aws-amplify/datastore": "^2.9.2",
    "@expo/metro-config": "^0.1.49",
    "@expo/vector-icons": "^12.0.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "5.9.7",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "@reduxjs/toolkit": "^1.5.0",
    "aws-amplify": "^3.3.13",
    "aws-amplify-react-native": "^4.2.10",
    "aws-appsync": "^4.0.2",
    "aws-appsync-auth-link": "^3.0.2",
    "aws-appsync-subscription-link": "^3.0.3",
    "expo": "~40.0.0",
    "expo-font": "~8.4.0",
    "expo-location": "~10.0.0",
    "expo-permissions": "~10.0.0",
    "expo-status-bar": "~1.0.3",
    "immer": "^8.0.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "0.63.4",
    "react-native-animatable": "^1.3.3",
    "react-native-floating-action": "^1.21.0",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-paper": "^4.7.1",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-svg": "^12.1.0",
    "react-native-swipe-list-view": "^3.2.6",
    "react-native-testing-library": "^6.0.0",
    "react-native-typeform-embed": "^1.0.4",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.0.0",
    "react-redux": "^7.2.2",
    "styled-components": "^5.2.1",
    "use-deep-compare-effect": "^1.6.1"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/jest": "^26.0.19",
    "@types/react": "~16.9.35",
    "@types/react-devtools": "^3.6.0",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "@types/react-test-renderer": "^17.0.0",
    "@types/redux-mock-store": "^1.0.2",
    "@types/remote-redux-devtools": "^0.5.4",
    "@types/styled-components": "^5.1.7",
    "@types/styled-components-react-native": "^5.1.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-root-import": "^6.6.0",
    "eslint": "^7.16.0",
    "eslint-import-resolver-typescript": "^2.3.0",
    "faker": "^5.1.0",
    "ini": "^1.3.5",
    "inquirer": "^6.5.1",
    "jest-expo": "^40.0.1",
    "react-devtools": "^4.10.1",
    "react-test-renderer": "^17.0.1",
    "reactotron-react-native": "^5.0.0",
    "reactotron-redux": "^3.1.3",
    "redux-mock-store": "^1.5.4",
    "remote-redux-devtools": "^0.5.16",
    "remotedev-server": "^0.3.1",
    "typescript": "~4.0.0"
  },
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  },
  "private": true
}

In a try to keep going with the project, we're storing all data locally without filtering and then making a manual filter, but it takes so much time.

Appreciate any help on this.

[bluelabsus]

i'm having the exact same problem although its angular project. did you get any solution?

[reberthkss]

+1 facing this problem yesterday without a solution yet

[reberthkss]

refer https://github.com/aws/aws-appsync-community/issues/165