struggling with a simple 'byId' query with @apollo/client

[jcollum-nutrien]

Generated the code and I have a customerById query:

export type Query = {
  __typename?: 'Query'; 
  customerById?: Maybe<Customer>;
...

My code:

import { gql, useQuery } from '@apollo/client';

const customerQuery = gql(
  `
    query CustomerById($input: CustomerQueryInput!) {
        customerById(input: $input) {
            type
            accountId
            regionId
        }
    }
`
);

const run = async () => {

  const {data} = useQuery(customerQuery, {input: {recId: '936b76c9-49cc-4cbb-80d1-88c7dc6ad7c3'}})
  console.table(data)

}

run()

But I get a TS failure:

So how do I run a CustomerById query with Apollo? I'm trying to build a simple script that will pull data using generated code. This is a proof of concept.

I have to say it's really hard to google for examples with this tool because there was already a "graphql codegen" tool (that's being deprecated). I really wish this tool had a more distinct name.

[charlypoly]

Hi @jcollum-nutrien,

The following line:

const {data} = useQuery(customerQuery, {input: {recId: '936b76c9-49cc-4cbb-80d1-88c7dc6ad7c3'}})

Should be as follow:

const {data} = useQuery(customerQuery, { variables: { input: {recId: '936b76c9-49cc-4cbb-80d1-88c7dc6ad7c3'}} })

[jcollum-nutrien]

That helps thanks. The thing I can't figure out is where variables is in the types. The word variables does not appear in the generated code.

This is the type for that input:

export type CustomerQueryInput = {
  recId: Scalars['ID'];
};

Not { variables: {recId: Scalars['ID']; } }. That's surprising. I don't see it in the Apollo code either. This feels like something the user needs to "just know".

[charlypoly]

@jcollum-nutrien the variables property is defined by Apollo Client's useQuery(): https://www.apollographql.com/docs/react/data/queries/#usequery-api