Trying to use React Apollo Query component for GraphQL query with typescript causing error

Question

I'm trying to query a GraphQl API with Apollo. I'm doing it in React with typescript and I can't get the Query component to stop throwing errors. I'm new to this whole combination, so I might be doing something obviously wrong. Any ideas?

Here's the error:

Type '{ children: (string | (({ loading, error, data }: QueryResult<any, OperationVariables>) => any))[]; query: any; }' is not assignable to type 'Pick<Readonly<QueryProps<any, OperationVariables>> & Readonly<{ children?: ReactNode; }>, "children" | "displayName" | "skip" | "onCompleted" | "onError" | "ssr" | "variables" | ... 6 more ... | "partialRefetch">'.
  Types of property 'children' are incompatible.
    Type '(string | (({ loading, error, data }: QueryResult<any, OperationVariables>) => any))[]' is not assignable to type '((result: QueryResult<any, OperationVariables>) => ReactNode) | (((result: QueryResult<any, OperationVariables>) => ReactNode) & string) | (((result: QueryResult<any, OperationVariables>) => ReactNode) & number) | ... 4 more ... | (((result: QueryResult<...>) => ReactNode) & ReactPortal)'.
      Type '(string | (({ loading, error, data }: QueryResult<any, OperationVariables>) => any))[]' is not assignable to type '((result: QueryResult<any, OperationVariables>) => ReactNode) & ReactNodeArray

Here's my code:

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


export interface LoginProps { 
    data: object; item: string; query: object; loading: string; error: string;
 };

 const getLogin =
    gql`
        {
        viewer {
            login
            }
        }
    `;

export class Test extends React.Component<LoginProps, {}> { 
    <Query query={getLogin}>
            {({ loading, error, data }) => {
                if (loading) return <p>Loading...</p>;
                if (error) return <p>Error!</p>;

                return data.viewer.map( item => {
                    <div key={item.login}>
                        <p>{item.login}</p>
                    </div>
                });
            }};
    </Query>
};

export default Test;

YEVY · Accepted Answer · 2020-07-29 13:54:36Z

5

Obviously not relevant, but for those coming here in search of an answer, desctructure from within Query like so:

    <Query query={getLogin}>
        {(result: QueryResult) => {
          const { loading, error, data } = result;

            // ...rest here
            if (loading) return <p>Loading...</p>;
            if (error) return <p>Error!</p>;

            return data.viewer.map( item => {
                <div key={item.login}>
                    <p>{item.login}</p>
                </div>
            });
        }};
</Query>

answered Jul 29, 2020 at 13:54

YEVY

1,2201 gold badge15 silver badges17 bronze badges

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

Comments

halfer · Accepted Answer · 2022-07-16 00:23:35Z

1

First, since you're not using state on your component, I would recommend you to use React.FunctionComponent instead of React.Component.

In regards to your problem: you have to use the jsx components inside the render function of the component, something like:

export class Test extends React.Component<LoginProps, {}> {
  // HERE: use the render method
  render() {
    return (
      <Query query={getLogin}>
        {({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error!</p>;

          return data.viewer.map(item => {
            <div key={item.login}>
              <p>{item.login}</p>
            </div>;
          });
        }}
        ;
      </Query>
    );
  }
}

edited Jul 16, 2022 at 0:23

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered May 4, 2019 at 20:23

Marco Daniel

5,8055 gold badges31 silver badges38 bronze badges

Collectives™ on Stack Overflow

Trying to use React Apollo Query component for GraphQL query with typescript causing error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related