Apollo Query with Variable

Question

Just a basic apollo query request

this.client.query({
  query: gql`
    {
      User(okta: $okta){
        id
      }
    }`
}).then(result => {
  this.setState({userid: result.data.User});
  console.log(this.state.userid.id)
}).catch(error => {
  this.setState({error: <Alert color="danger">Error</Alert>});
});

The question is, how/where to set the $okta variable.

Didn't find a solution on Stackoverflow or Google - would be great if someone could help me:)

Clypeus

Answer 1

It should be something like this:

const query = gql`
  query User($okta: String) {
    User(okta: $okta){
      id
    }
  }
`;

client.query({
  query: query,
  variables: {
    okta: 'some string'
  }
})

The documentation for Apollo client with all the details can be found here: https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.query

Lichen

NP, my pleasure! – Lichen

But it should be noted that this generic functionality is only to be found under the React section of the docs, which is pretty ridiculous. – Fab

s in the example query definition string needs to be capitalized – Hispid

Note that client.query is async, and should be awaited... – Messiah