Step 1 - Preparing the folders and files

1. In your store repository, go to the src folder and create the graphql subfolder. You can do this by running the following command in your terminal:
   
   

   _10

   mkdir graphql

   
   
2. Inside the new graphql folder, create the vtex subfolder.
   
   

   _10

   mkdir vtex

   
   
3. In the vtex folder, create resolvers and typeDefs subfolders.
   
   

   _10

   mkdir resolvers typeDefs

   
   

   The src/graphql/vtex/resolvers and src/graphql/vtex/typeDefs paths are mandatory, but you can organize the files inside those directories as you wish.

4. Create an index.ts file inside the resolvers folder.

Note that in the code example above, the type definitions and resolvers files were created at <resolverName>.ts and <typeName>.graphql.

Step 2 - Creating type definitions (typeDefs)

1. Create a new <typeName>.graphql file inside the vtex/typeDefs folder. For example, if we extend the StoreProduct type from the FastStore API, the name of the file should be product.graphql.

   The organization inside the vtex/typeDefs folder is flexible. You can create multiple typeDefs files or group them all together in one file. During the build process and when running the local server file, all .graphql files under this directory will be considered.

2. To extend StoreProduct, let's add a customData required field in product.graphql, which should return a string value. This field can store custom information related to a product in your store. For example, you might use this field to store additional product details that are not in the native FastStore API schema.
   graphql/vtex/typeDefs/product.graphql

   
   

   _10

   extend type StoreProduct {

   _10

   """

   _10

   Custom data extending StoreProduct

   _10

   """

   _10

   customData: String!

   _10

   }

   
   

   The typeDefs files must have a .graphql extension. Also, index.ts is necessary for resolvers but not required for typeDefs.

Step 3 - Creating resolvers

1. Create a new <resolver>.graphql file inside the vtex/resolvers folder. Let's continue using the StoreProduct type example. That means the name of the file will be product.ts.

   The organization inside this folder is flexible. You can create multiple resolver files or group them all together in one file.

2. Define the resolver in the product.ts file. This resolver specifies how to fetch the data for the customData field based on the root object, which represents the StoreProduct.
   graphql/vtex/resolvers/product.ts

   
   

   _11

   import type { StoreProductRoot } from "@faststore/api";

   _11

   _11

   const productResolver = {

   _11

   StoreProduct: {

   _11

   customData: (root: StoreProductRoot) => {

   _11

   return "My item id: " + root.itemId;

   _11

   },

   _11

   },

   _11

   };

   _11

   _11

   export default productResolver;

   
   

3. Open the index.ts file inside the vtex/resolvers folder and import the resolver, StoreProductResolver, you created in the previous step.
4. Create a resolvers object that includes the imported resolvers.
   graphql/vtex/resolvers/index.ts

   
   

   _10

   import { default as StoreProductResolver } from "./product";

   _10

   _10

   const resolvers = {

   _10

   ...StoreProductResolver,

   _10

   };

   _10

   _10

   export default resolvers;

   
   

If the changes you made are still not available, refer to the troubleshooting section GraphQL changes not visible during development.

Step 1 - Preparing the folders and files

If you already have the directory structure created in the Extending VTEX API schemas, add the thirdParty folder inside src/graphql.

1. In your store repository, go to the src folder and create the graphql subfolder. You can do this by running the following command in your terminal:
   
   

   _10

   mkdir graphql

   
   
2. Inside the new graphql folder, create the thirdParty subfolder.
   
   

   _10

   mkdir thirdParty

   
   
3. In thirdParty, create resolvers and typeDefs subfolders.
   
   

   _10

   mkdir resolvers typeDefs

   
   

   The src/graphql/vtex/resolvers and src/graphql/vtex/typeDefs paths are mandatory, but you can organize the files inside those directories as you wish.

4. Create a index.ts file inside the resolvers folder.
   Once you have created the essentials folders, you will have a folder structure similiar to the the following:
   
   

   _11

   starter.store/

   _11

   └── src/

   _11

   └── graphql/

   _11

   ├── thirdParty/

   _11

   │ ├── resolvers/

   _11

   │ └── index.ts

   _11

   │ └── <resolverName>.ts

   _11

   │ └── …

   _11

   │ ├── typeDefs/

   _11

   │ └── <typeName>.graphql

   _11

   │ └── …

   
   

   This directory structure distinguishes between data originating from VTEX and data from third-party APIs.

Step 2 - Creating type definitions and resolvers

1. Create a new <typeName>.graphql inside the thirdParty folder. As we are creating new queries, the name of the file that defines the type definitions can be extra.graphql.
2. Create a new <resolver>.ts file inside the graphql/thirdParty/resolvers folder.

Step 3 - Creating query or mutation schemas

1. Create the extra.graphql file inside the graphql/thirdParty/typeDefs folder. The extra.graphql defines the type definitions in a GraphQL schema file.
   graphql/thirdParty/typeDefs/extra.graphql

   
   

   _12

   _12

   type ExtraData {

   _12

   """

   _12

   Data customizing ExtraData

   _12

   """

   _12

   data: String!

   _12

   }

   _12

   _12

   type Query {

   _12

   extraData: ExtraData

   _12

   namedExtraData(name: String!): ExtraData

   _12

   }

   
   
2. Create the extra.ts file inside the graphql/thirdParty/resolvers folder. This file defines the resolvers that handle the logic for the defined queries or mutations.
   graphql/thirdParty/resolvers/extra.ts

   
   

   _16

   const extraDataResolver = {

   _16

   Query: {

   _16

   extraData: () => {

   _16

   return {

   _16

   data: "Extra data",

   _16

   };

   _16

   },

   _16

   namedExtraData: (_, { name }) => {

   _16

   return {

   _16

   data: `Named extra data: ${name}`,

   _16

   };

   _16

   },

   _16

   },

   _16

   };

   _16

   _16

   export default extraDataResolver;

   
   
3. In the graphql/thirdParty/resolvers folder, create the index.ts file to combine all the resolvers into a single object.
   graphql/thirdParty/resolvers/index.ts

   
   

   _10

   import { default as StoreExtraResolver } from "./extra";

   _10

   _10

   const resolvers = {

   _10

   ...StoreExtraResolver,

   _10

   };

   _10

   _10

   export default resolvers;

   
   
4. With the schema and resolvers in place, query the data using GraphQL queries. Here's an example query to access the extra data:
   
   

   _10

   query {

   _10

   extraData {

   _10

   data

   _10

   }

   _10

   namedExtraData(name: "Hello") {

   _10

   data

   _10

   }

   _10

   }

   
   

If the changes you made are still not available, refer to the troubleshooting section GraphQL changes not visible during development.