aws-mobile-appsync-sdk-js icon indicating copy to clipboard operation
aws-mobile-appsync-sdk-js copied to clipboard

appsync query with filters not working - react native

Open wpdas opened this issue 4 years ago • 3 comments

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.

wpdas avatar Jan 28 '21 15:01 wpdas

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

bluelabsus avatar Apr 06 '21 04:04 bluelabsus

+1 facing this problem yesterday without a solution yet

reberthkss avatar May 30 '21 13:05 reberthkss

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

reberthkss avatar Jun 07 '21 11:06 reberthkss