如何在 Apollo 客户端中传递地理查询变量（使用 React Native / Hasura GraphQL）

Question

I have the following gql query:

query nearby_users($point: geography!) {
  users(where: {location: {_st_d_within: {distance: 200000, from: $point}}}) {
    id
    location
  }
}

In the API console of Hasura, I put the following as query variables:

{
  "point": {
    "type" : "Point", 
    "coordinates": [43, 11]
  }
}

In turn, I get the following output (this is what I'm looking for:):

{
  "data": {
    "users": [
      {
        "id": 3,
        "location": {
          "type": "Point",
          "crs": {
            "type": "name",
            "properties": {
              "name": "urn:ogc:def:crs:EPSG::4326"
            }
          },
          "coordinates": [
            43.75049,
            11.03207
          ]
        }
      },
      {
        "id": 1,
        "location": {
          "type": "Point",
          "crs": {
            "type": "name",
            "properties": {
              "name": "urn:ogc:def:crs:EPSG::4326"
            }
          },
          "coordinates": [
            43.75049,
            11.03207
          ]
        }
      }
    ]
  }
}

However, when I move things to React Native using an Apollo client, things get a bit tricky.

I create a point as follows:

    const point = JSON.stringify({
      "point": {
        "type" : "Point", 
        "coordinates": [43, 11]
      }
    }); 

And then query the client:

client.query({ query: GET_USERS_NEARBY, variables: { point }})

However, I get the following error:

GraphQL error: postgres query error
* http://192.168.0.201:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:136968:30 in ApolloError
- node_modules/@apollo/client/apollo-client.cjs.js:2465:62 in <anonymous>
* [native code]:null in forEach
- node_modules/@apollo/client/apollo-client.cjs.js:2060:12 in QueryInfo.prototype.notify
* [native code]:null in forEach
- node_modules/@apollo/client/apollo-client.cjs.js:2720:8 in QueryManager.prototype.broadcastQueries
* http://192.168.0.201:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:139848:35 in <unknown>
- node_modules/zen-observable/lib/Observable.js:321:16 in _this2.subscribe$argument_0.next
- node_modules/zen-observable/lib/Observable.js:134:6 in notifySubscription
* http://192.168.0.201:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:143391:23 in onNotify
- node_modules/zen-observable/lib/Observable.js:234:11 in next
* [native code]:null in forEach
- node_modules/@apollo/client/apollo-client.cjs.js:1911:28 in inner.subscribe$argument_0.next
- node_modules/subscriptions-transport-ws/dist/client.js:144:37 in executeOperation$argument_1
- node_modules/subscriptions-transport-ws/dist/client.js:510:16 in SubscriptionClient.prototype.processReceivedData
* http://192.168.0.201:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:150646:34 in <unknown>
- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/WebSocket/WebSocket.js:232:27 in _eventEmitter.addListener$argument_1
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

After much experimentation, it is very clear that the error is coming from my point constant.

I tried removing the JSON.stringify as follows:

    const point = {
      "point": {
        "type" : "Point", 
        "coordinates": [43, 11]
      }
    }; 

This leads a network type error:

Network error: key "type" not present
* http://192.168.0.201:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:136968:30 in ApolloError
- node_modules/@apollo/client/apollo-client.cjs.js:2465:62 in <anonymous>
* [native code]:null in forEach
- node_modules/@apollo/client/apollo-client.cjs.js:2060:12 in QueryInfo.prototype.notify
* [native code]:null in forEach
- node_modules/@apollo/client/apollo-client.cjs.js:2720:8 in QueryManager.prototype.broadcastQueries
* http://192.168.0.201:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:139313:45 in <unknown>
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Does anyone have an idea on what I'm doing wrong? Really appreciate it:)

Answer 1

The issue is that you are transforming the variable into a string. Hasura is expecting a Javascript object, not a string.

remove the JSON.stringify from your code

const point = JSON.stringify({
      "point": {
        "type" : "Point", 
        "coordinates": [43, 11]
      }
    }); 

and leave just the javascript object:

const point = {
      "point": {
        "type" : "Point", 
        "coordinates": [43, 11]
      }
    };