LTT GraphQL §

Workflow §

Let’s say you want to add an extra sent_to_production_at field in the order returned data

1. Update src/graphql/Hq/queries/order.hq.graphql

query gqlOrderByID($uid: Uuid!) {
  order(uid: $uid) {
    ...
    sent_to_production_at 
    ...
  }
}
 

2. Run npm run graphql-codegen to generate the GraphQL documents
3. Note the generated document has been updated in hq.graphql.ts:

export const GqlOrderByIdDocument = {
  kind: "Document",
  definitions: [
    {
      kind: "OperationDefinition",
      operation: "query",
      name: { kind: "Name", value: "gqlOrderByID" },
      ...
      selectionSet: {
        kind: "SelectionSet",
        selections: [
          {
            kind: "Field",
            name: { kind: "Name", value: "order" },
            ...
            selectionSet: {
              kind: "SelectionSet",
              selections: [
                ...
                {
                  kind: "Field",
                  name: { kind: "Name", value: "sent_to_production_at" },
                },
                ...
              ],
            },
          },
        ],
      },
    },
  ],
} as unknown as DocumentNode<GqlOrderByIdQuery, GqlOrderByIdQueryVariables>;

4. Pay attention to the last line, the query type is GqlOrderByIdQuery, which is as following:

export type GqlOrderByIdQuery = {
  __typename?: "Query";
  order?:
    | {
        __typename?: "Order";
        ...
        sent_to_production_at?: any | null | undefined;
        ...
      }
    | null
    | undefined;
};

5. In the actual API call, you will write something like the following:

  const { loading, data } = useQuery(HqTypes.GqlOrderByIdDocument, {
    variables: {
      uid: orderID,
    },
  });