Generate GraphQL Client SDKs

Generate TypeScript Client SDKs using apollo-tooling

1. Install apollo CLI as --dev into your Nx workspace (recommended by Apollo)

yarn add --dev apollo

2. Create apollo.config.js in Nx app’s folder:

module.exports = {
  client: {
    service: {
      name: 'miluv-profile',
      url: 'http://localhost:3001/graphql',
      // optional headers
      headers: {
        //authorization: 'Bearer lkjfalkfjadkfjeopknavadf'
      },
      // optional disable SSL validation check
      // skipSSLValidation: true
    }
  }
};

3. Generate client

Tip: apollo client:codegen supports --watch to watch & auto-regenerate, which is useful during development.

apollo client:codegen -c apps/miluv-profile/apollo.config.js --endpoint=http://localhost:3001/graphql --target=typescript --includes=apps/miluv-profile/src/**/*.tsx

Example:

Files are generated alongside the React .tsx files inside __generated__ subfolders.

2. Optional: Download the schema, NestJS/Strapi backend must be running:

# from workspace folder
apollo client:download-schema --endpoint=http://localhost:1337/graphql ./schema.graphql.json

Generate Kotlin/Java GraphQL Client SDK

If you use Gradle, you can use Apollo Client: https://www.apollographql.com/docs/android/essentials/get-started-kotlin/
Required: schema.json

However, if you use Maven, use graphql-kotlin instead.

Maven pom.xml:

            <!-- GraphQL Client Generator -->
            <plugin>
                <groupId>com.expediagroup</groupId>
                <artifactId>graphql-kotlin-maven-plugin</artifactId>
                <version>${graphql-kotlin.version}</version>
                <executions>
                    <execution>
                        <id>generate-graphql-client</id>
                        <goals>
                            <!-- Enable only when needed -->
                            <!--<goal>introspect-schema</goal>-->
                            <goal>generate-client</goal>
                        </goals>
                        <configuration>
                            <!--<endpoint>http://localhost:3001/graphql</endpoint>-->
                            <packageName>app.miluv.graphql</packageName>
                            <schemaFile>${project.basedir}/src/main/resources/schema.graphql</schemaFile>
                            <!--<schemaFile>${project.build.directory}/schema.graphql</schemaFile>-->
                            <clientType>KTOR</clientType>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <!-- build helper plugin is required for IntelliJ IDEA to correctly identify generated sources -->
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>build-helper-maven-plugin</artifactId>
                <version>3.2.0</version>
                <executions>
                    <execution>
                        <id>add-graphql-client-source</id>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>add-source</goal>
                        </goals>
                        <configuration>
                            <sources>
                                <source>${project.build.directory}/generated-sources/graphql</source>
                            </sources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

1. Ensure miluv-profile is running in http://localhost:3001/graphql
2. Run: mvn compile -DskipTests

The generated sources will be in target/generated-sources/graphql

Download Apollo GraphQL Schema

1. Install apollo CLI as --dev into your Nx workspace (recommended by Apollo)

yarn add --dev apollo

Add into your workspace.json, inside projects > miluv-profile > architect:

        "schema-download": {
          "builder": "@nrwl/workspace:run-commands",
          "options": {
            "commands": [
              {
                "command": "node_modules/.bin/apollo service:download -c apps/miluv-profile/apollo.config.js --endpoint=http://localhost:3001/graphql apps/miluv-profile/schema.json"
              }
            ]
          }
        }

Then run:

nx run miluv-profile:schema-download