Problems with query using apollo client and react

Help
1

Hi guys basically i wanna use a graphql query consuming it with apollo client, the thing is that when i print the object to see the data, data is set as “undefined”, and i get the error

data: undefined, error: ApolloError: ‘__typename’

Basically the structure of the query is

import { gql } from "@apollo/client";
const FIELD_PLOT_TAGS_DIMS_QUERY = gql`
  query {
    query_tags_and_dims {
      query_RootType {
        aLGasResp {
          curve_arr {
            lift_gas_input_rate {
              dimension {
                desc
                name
              }
              tag {
                help_text
                description
                is_string
                dim_name
                min_val
                max_val
                step_val
                modulus
              }
            }
          }
        }
      }
    }
  }
`;

And Im using the query as follows just to show the object and see if it’s working

const tangsAndDimsQuery = useQuery(FIELD_PLOT_TAGS_DIMS_QUERY);
console.log("Tags and dims", tangsAndDimsQuery);

I have a similar query and i dont have any problem with it the only difference with the current one is that the level “query_tags_and_dims” in the query that i mentioned is not beeing used, wheni removed this query_tags_and_dims level it works, burt for this case i need that level in the query in order to get specific data, if someone can help me explaining why this is happening it would be very useful since i’m new with apollo client, if ther’s some info that I need to add to make it more clear please let me know

2

Hey @Angel_Gabriel_Chable :wave:

Would you be able to print the full error in that ApolloError instance? You should be able to access error.message on the object returned by useQuery to get the full thing. This would be super helpful.

I have a similar query and i dont have any problem with it the only difference with the current one is that the level “query_tags_and_dims” in the query that i mentioned is not beeing used

I’m a little confused about this. Just to clarify, the query_tags_and_dims field is a field in your root query type correct? In other words, your server’s GraphQL schema looks something like this?

type Query {
  query_tags_and_dims: TagsAndDims # or whatever this type is called
}

type TagsAndDims {
  query_RootType: RootType # or whatever this type is called
}

type RootType {
  # ... the fields you can access from query_RootType
}

Does this look right?

wheni removed this query_tags_and_dims level it works

Would you go into more detail on this? Are you saying that you’re able to query like this and it works?

query {
  query_RootType {
    # ... fields you select here
  }
}
3

My graphql schema looks like that one you mentioned yes, i don’t have a problem with it, to clarify this I have the followings queries

the first one I’m consuming is

 query {
    query_RootType {
      aLGasResp {
        curve_arr {
          lift_gas_input_rate {
            value
            user_value
            formatted_str
            message_list {
              message
              message_level
            }
          }
       }
    }
}

This one is called FIELD_PLOT_QUERY

const plotInfoQuery = useQuery(FIELD_PLOT_QUERY);

And i don’t have any problem with it, i can get all the data without problems, as you can see it’s a litle bit different from the query that i put in the question, becase the query that i mentioned has this “query_tags_and_dims” level which allows me to get different data

Basically the messages just say “ApolloError: ‘__typename’”

I installed the apolo dev tool extension and the query is defined as follows:

{
  query_tags_and_dims {
    query_RootType {
      aLGasResp {
        curve_arr {
          lift_gas_input_rate {
            dimension {
              desc
              name
              __typename
            }
            tag {
              help_text
              description
              is_string
              dim_name
              min_val
              max_val
              step_val
              modulus
              __typename
            }
            __typename
          }
          __typename
        }
        __typename
      }
      __typename
    }
    __typename
  }
}

All the levels of the query have __typename so it makes me be even more confused

4

Would you be able to print the raw error coming from your server in the response? Without a runnable example, its really difficult for me to determine what might be causing your issue here.

On the note of the added __typename fields, this is done by Apollo Client for caching reasons. The InMemoryCache is a normalized cache which requires the __typename to determine what object type is returned from your server. We just add that field to your query for you so you don’t have to remember to add __typename everywhere, otherwise this gets annoying fast. Apollo Client doesn’t know your full server schema so it uses this technique to determine what your object types are. Hopefully that makes sense!

5

This is the raw error

Traceback (most recent call last):"
1
:
" File "/t/pyenv/versions/pypy/lib/pypy3.9/site-packages/graphql/execution/execute.py", line 521, in execute_field"
2
:
" result = resolve_fn(source, info, **args)"
3
:
" File "/t/pyenv/versions/pypy3.9-7.3.12/lib/pypy3.9/functools.py", line 302, in call"
4
:
" return self.func(*self.args, *args, **keywords)"
5
:
" File "/t/pyenv/versions/pypy/lib/pypy3.9/site-packages/ariadne/types.py", line 588, in resolve"
6
:
" return next_(obj, info, **kwargs)"
7
:
" File "/t/pyenv/versions/pypy3.9-7.3.12/lib/pypy3.9/functools.py", line 302, in call"
8
:
" return self.func(*self.args, *args, **keywords)"
9
:
" File "/i/src/winglue/pylib-src/aria/graphql_middleware.py", line 85, in save_system_state_middleware"
10
:
" result = resolver(obj, info, **kwargs)"
11
:
" File "/t/pyenv/versions/pypy3.9-7.3.12/lib/pypy3.9/functools.py", line 302, in call"
12
:
" return self.func(*self.args, *args, **keywords)"
13
:
" File "/i/src/winglue/pylib-src/aria/graphql_middleware.py", line 59, in unit_conversion_middleware"
14
:
" result = resolver(obj, info, **args)"
15
:
" File "/t/pyenv/versions/pypy3.9-7.3.12/lib/pypy3.9/functools.py", line 302, in call"
16
:
" return self.func(*self.args, *args, **keywords)"
17
:
" File "/i/src/winglue/pylib-src/aria/aria_permissions.py", line 235, in restrict_graphql_permission_middleware_for_report"
18
:
" return resolver(obj, info, **kwargs)"
19
:
" File "/t/pyenv/versions/pypy3.9-7.3.12/lib/pypy3.9/functools.py", line 302, in call"
20
:
" return self.func(*self.args, *args, **keywords)"
21
:
" File "/i/src/winglue/pylib-src/aria/aria_permissions.py", line 176, in restrict_graphql_permission_middleware_for_query_roottype"
22
:
" return resolver(obj, info, **kwargs)"
23
:
" File "/t/pyenv/versions/pypy3.9-7.3.12/lib/pypy3.9/functools.py", line 302, in call"
24
:
" return self.func(*self.args, *args, **keywords)"
25
:
" File "/i/src/winglue/pylib-src/aria/aria_permissions.py", line 144, in restrict_graphql_permission_middleware"
26
:
" return resolver(obj, info, **kwargs)"
27
:
" File "/i/src/winglue/pylib-src/aria/tags_and_dims_resolver.py", line 263, in resolve_query_tags_and_dims"
28
:
" resolve_tag(tag_map, dim_map, info.return_type, selection),"
29
:
" File "/i/src/winglue/pylib-src/aria/tags_and_dims_resolver.py", line 229, in resolve_tag"
30
:
" resolve_tag("
31
:
" File "/i/src/winglue/pylib-src/aria/tags_and_dims_resolver.py", line 229, in resolve_tag"
32
:
" resolve_tag("
33
:
" File "/i/src/winglue/pylib-src/aria/tags_and_dims_resolver.py", line 229, in resolve_tag"
34
:
" resolve_tag("
35
:
" File "/i/src/winglue/pylib-src/aria/tags_and_dims_resolver.py", line 216, in resolve_tag"
36
:
" field_type = parent_type.fields[field_name]"
37
:
“KeyError: ‘__typename’”

6

This error looks like its happening on your server, so you’d need to work on your server code to see if you can resolve this query. Unfortunately there isn’t much Apollo Client can do if your server is erroring when trying to execute a query but to give you back the error that occurred (which is what you’re seeing with the return value of useQuery).

Unfortunately I’m not super familiar with Python or its GraphQL library so unfortunately I don’t have much guidance to give based on that stacktrace :disappointed:.

I am curious though, are you able to execute this query from something like Apollo’s Studio sandbox or GraphiQL?

7

Yes the query is actually working on apollos studio sandbox

{
  "data": {
    "query_tags_and_dims": {
      "query_RootType": {
        "aLGasResp": {
          "curve_arr": [
            {
              "lift_gas_input_rate": [
                {
                  "dimension": {
                    "desc": "MCF/day",
                    "name": "GRTE"
                  },
                  "tag": {
                    "help_text": "",
                    "description": "Gas Rate",
                    "is_string": false,
                    "dim_name": "GRTE",
                    "min_val": 0,
                    "max_val": 99999,
                    "step_val": 0.5,
                    "modulus": 0.001
                  }
                }
              ]
            }
          ]
        }
      }
    }
  }
}

I’m talking to these guys to see what’s going on hahahaha, it seems the current backend doesn’t support the __typename field, so i will try to desactivate them and see what happens, although I don’t really understand why __typename wouldnt be supported if i have some queries that are using __typename, to give you some context these guys are trying to move a proyect made in clojurescript-react with graphgql to typescript-react with grapghql using the old backend, so we are having some random problems like this one (I,m new using graphql and apollo so…)

8

Interesting! Seems the server isn’t fully spec compliant then. Hope the team is able to figure out how to get __typename working!

9

Thank you very much!