Gatsby-GraphQL - Fetching remote data from a postgres server

Question

I have an existing database served on postgres locally.

I'd like to fetch that data via GraphQL in my Gatsby app. I'm using gatsby-source-pg to do this.

It's not clear from the docs + example here how to set this up properly. From what I understand, you need the two highlighted portions below.

// ./src/components/test.js

import { graphql } from 'gatsby';
    
export const query = graphql` // (1) graphQL query
  {
    postgres {
      allUsers {
        nodes {
          id
          firstLastName
        }
      }
    }
  }
`;

const Test = ({data}) => { // (2) grab the `data` prop (not sure where this comes from)  
  return (
    <AppLayout>
      {data.postgres.allUsers.nodes.map(user => <p>{user.firstLastName}</p>)} // data is undefined
    </AppLayout>
  )
}

export default Test

// gatsby-config.js
    {
      resolve: "gatsby-source-pg",
      options: {
        connectionString: "postgres://user@localhost:5432/testdb",
        schema: "public",
      },
    },

Questions:

• How do I query data from the ./src/components directory? The data prop returns undefined if I run the exact code above. I noticed this same setup works when running it from ./src/pages/index.js. Maybe I'm missing options parameter in gatsby-source-pg to tell it which directories to look at?
• How is query and data from the code above connected? I couldn't tell by looking at the example.