How to use client.query without JSX components in Apollo Client?

Question

I'm trying to make a query in Apollo Client with React without returning a JSX component, just an object (the data object that is received when making a common query to Apollo Server).

I tried using <Query /> component, but it returns me a React Node and I only need an object. The documentation only explain methods that return JSX components at some point, when all that I'm looking to do is send a request and process the response in a callback.

Actually I'm trying this way (I'm using TypeScript in React):

import React from 'react';
import { withApollo } from 'react-apollo';
import gql from 'graphql-tag';

const MY_QUERY = gql`
  query MY_QUERY {
    myQuery {
      attr1
      attr2
    }
  }
`;

const res = ({ client }: { client: any }) =>
  client
    .query(MY_QUERY)
    .then((data: { data: any }) => data);

withApollo(res);

console.log(res);

With this, what I'm looking is for a object like

{
  "data": {
    "myQuery": [
      {
        "attr1": "something 1...",
        "attr2": "another thing 1..."
      },
      {
        "attr1": "something 2...",
        "attr2": "another thing 2..."
      },
      {
        "attr1": "something 3...",
        "attr2": "another thing 3..."
      }
    ]
  }
}

But what I'm receiving from the browser is

ƒ WithApollo(props) {
    var _this = _super.call(this, props) || this;

    _this.setWrappedInstance = _this.setWrappedInstance.bind(_this);
    return _this;
}

Any suggestion?

Please post the code you currently have. stackoverflow.com/help/mcve is necessary for code problems. It's unclear what your code currently looks like but it's likely that a component need to be used any way because that's how things interact in React. — Estus Flask
– Estus Flask, Commented Feb 10, 2019 at 20:47
Pleas edit your question and format your code inside of it instead of sending it as a comment — Treycos
– Treycos, Commented Feb 10, 2019 at 20:52
That's a really weird gql query syntax, does this works in the GQL playground ? Can you show me the JSX part that uses the result, I'll show you how to use the Query node, it's fairly easy — Treycos
– Treycos, Commented Feb 10, 2019 at 21:01

Rachid Rhafour · Accepted Answer · 2019-04-23 22:48:24Z

4

Try this instead

class anyComponent extends React.Component<Props> {
   state = {
      results: null,
   }
   componentDidMount = async () => {
       const {client} = this.props;
       res = await client.query({query: MY_QUERY});
       console.log(res);
       this.setState({results: res})
   }
   render() {
       // check if any results exist (just an example)
       return results ? <AnyJsx results={results}/> : null;
   }
}
export default withApollo(anyComponent);

You were console logging the function instead of calling it to get its result You may need some lifecycle functions like componentDidMount to retrieve data

edited Apr 23, 2019 at 22:48

answered Feb 11, 2019 at 4:55

Rachid Rhafour

4562 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Clemente Over a year ago

Thanks Rachid! I updated the code with your answer but now TypeScript say me that withApollo is not expecting to receive a promise as parameter

Clemente Over a year ago

the error is: Argument of type '({ client }: { client: any; }) => Promise<any>' is not assignable to parameter of type 'ComponentType<WithApolloClient<{ client: any; }>>'.

Rachid Rhafour Over a year ago

@ClementeSerranoSutil check, I have updated the answer.

Rachid Rhafour Over a year ago

@ClementeSerranoSutil let me know if that help. if you want to add ur logic in life cycle methods JSX won't help you. you will need to use the HOC withApollo.

Sam Over a year ago

What would client be? I'm using Gatsby which uses graphql at build time and I don't think it has a client to query from, or I think the client might be local?

|

Collectives™ on Stack Overflow

How to use client.query without JSX components in Apollo Client?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related