GraphQL Admin interface, Error 400, Required parameter missing or invalid

[revington]

I'm using the graphQLProxy, same setup as the " Build a Shopify App with Node.js and React".

Here is my component code

import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import {
    Card,
    Stack,
    TextStyle,
} from '@shopify/polaris';
import store from 'store-js';
import { Redirect } from '@shopify/app-bridge/actions';
import { Context } from '@shopify/app-bridge-react';

import * as PropTypes from 'prop-types';

const GET_SHOP_DATA = gql`{shop{name} }`;
class ShopData extends React.Component {
    render() {
        return (
            <Query query={GET_SHOP_DATA}>
                    {({ data, loading, error }) => {
                        if (loading) return <div>Loading…</div>;
                        if (error) return <div>{error.message}</div>;
                        console.log(data);
                        return (
                            <Card>
                                <p>{data.shop.name}</p>
                            </Card>
                        );
                    }}
                        </Query>
        );
    }
}

export default ShopData;

As you can see the query is quite simple. I'm getting an error 400

{"errors":{"query":"Required parameter missing or invalid"}}

[katiedavis]

Hey @revington check out the tutorial again:

https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/fetch-data-with-apo...

You need to use `query` after your `gql`

[revington]

Hi @katiedavis,

Still having 

{"errors":{"query":"Required parameter missing or invalid"}}

with

`query q {shop{name} }`

if I print the query with `JSON.stringify(GET_SHOP_DATA)` I've got

{
    "kind": "Document",
    "definitions": [{
        "kind": "OperationDefinition",
        "operation": "query",
        "name": {
            "kind": "Name",
            "value": "q"
        },
        "variableDefinitions": [],
        "directives": [],
        "selectionSet": {
            "kind": "SelectionSet",
            "selections": [{
                "kind": "Field",
                "name": {
                    "kind": "Name",
                    "value": "shop"
                },
                "arguments": [],
                "directives": [],
                "selectionSet": {
                    "kind": "SelectionSet",
                    "selections": [{
                        "kind": "Field",
                        "name": {
                            "kind": "Name",
                            "value": "name"
                        },
                        "arguments": [],
                        "directives": []
                    }]
                }
            }]
        }
    }],
    "loc": {
        "start": 0,
        "end": 21
    }
}

Which makes sense to me but I'm new to graphql 

[asibilia]

@katiedavis if you're talking about the `query` operation type before the document's opening brackets, I don't think that's necessarily true.

Check out this article here

Specifically this quote:

The query above is somewhat of a shorthand form of GraphQL, which lets you define a query operation in a very concise way. But there are three optional parts to a GraphQL operation that aren’t used there. You’ll need these new parts if you want to execute something other than a query, or pass dynamic variables.

IF you don't need to pass dynamic variables and are just writing a simple query you can actually omit the word "query". The following should  be valid.

gql`
{
    shop  {
        name
    }
 }
`

That being said, I get the same errors as you @revington so I'm not sure what's wrong.

[chentsulin]

I finally got a solution in this thread:
https://community.shopify.com/c/Shopify-APIs-SDKs/Can-t-Fetch-Graphql-Admin-API-with-Koa-shopify-gra...