DEV Community: Azza Maddouri

Apollo GraphQL Integration in Jetpack Compose

Azza Maddouri — Fri, 26 Jul 2024 18:38:50 +0000

In this tutorial, we'll walk through setting up and configuring Apollo GraphQL in a Jetpack Compose project. If you're looking for a complete implementation of GraphQL using Clean Architecture, check out my GitHub repository.

Configure Your Project

1. Update `app/build.gradle.kts`

Add the Apollo plugin ID:

plugins {
    // ...
    alias(libs.plugins.apollo3Graph)
}

Next, add apollo-runtime to your dependencies:

dependencies {
    // ...
    // Apollo3
    implementation(libs.apollo.runtime)
}

2. Update `libs.versions.toml`

Add the Apollo version and library references:

[versions]
// ...
apollo3 = "3.8.5" // Latest version at the time of writing

[libraries]
// ...
apollo-runtime = { group = "com.apollographql.apollo3", name = "apollo-runtime" }
apollo-api = { group = "com.apollographql.apollo3", name = "apollo-api" }

[plugins]
// ...
apollo3Graph = { id = "com.apollographql.apollo3", version.ref = "apollo3" }

Define Package for Generated Files

Specify the package where the Kotlin files will be generated. Add this to the android section of app/build.gradle.kts:

android {
    // ...
    apollo {
        service("service") {
            packageName.set("com.example.appname")
        }
    }
    // ...
}

Add the GraphQL Schema

Get your server's URL from Apollo Studio, located in the box at the top left of the page:

Run the following command in Android Studio's Terminal tab to download your server's schema:

./gradlew :app:downloadApolloSchema --endpoint='http://localhost:4000/graphql' --schema=app/src/main/graphql/schema.graphqls

This will download a schema.graphqls file to app/src/main/graphql/schema.graphqls.

Sync the Project

After downloading the schema, sync the project.

Update `AndroidManifest.xml`

Add Internet Permission

First, add the internet permission to your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

Configure Network Security for Emulator

If you are using the Android emulator to connect to a server running on localhost:4000/graphql, configure network security to avoid "Network Request Failed" errors and enable communication with your GraphQL server.

Create network_security_config.xml

Create a file named network_security_config.xml in ../app/src/main/res/xml/:

   <?xml version="1.0" encoding="utf-8"?>
   <network-security-config>
       <domain-config cleartextTrafficPermitted="true">
           <domain includeSubdomains="true">10.0.2.2</domain>
       </domain-config>
   </network-security-config>

This configuration allows cleartext traffic to 10.0.2.2, which maps to localhost on your host machine.

Reference the Network Security Configuration

Update your AndroidManifest.xml to reference this network security configuration:

   <application
       android:networkSecurityConfig="@xml/network_security_config"
       // ...
   >
       // ...
   </application>

Add the First Query

After verifying your query in Apollo Studio's Sandbox Explorer, copy the query and create a new GraphQL file in src/main/graphql/.

Here's an example of a query that fetches a list of posts:

# src/main/graphql/Posts.graphql
query Posts($limit: Int!, $cursor: String) {
    posts(limit: $limit, cursor: $cursor) {
        hasMore
        posts {
            id
            createdAt
            updatedAt
            title
            text
        }
    }
}

Generate the Model

Build your project to generate the model code. Check the generated file at app/build/generated/source/apollo/service/com/example/appname/PostsQuery.kt.

Note: You have to rebuild your project each time you add a new query, mutation, or fragment.

Execute the First Query

Create an instance of ApolloClient and make a new call with your query.

Create an ApolloClient

Create a new file named Apollo.kt and create an instance of ApolloClient in it with your server URL:

val apolloClient = ApolloClient.Builder()
    .serverUrl("http://10.0.2.2:4000/graphql")
    .build()

Execute the Query

Use the apolloClient and the generated PostsQuery to execute a new query:

val response = apolloClient.query(PostsQuery(limit = limit, cursor = Optional.present(cursor))).execute()
val posts = response.data?.posts?.posts?.filterNotNull() ?: emptyList()

Congratulations! You have successfully integrated Apollo GraphQL in your Android project. For a complete implementation of GraphQL using Clean Architecture pattern, check out my GitHub repository. Happy coding 😊!

References

Apollo GraphQL Kotlin Tutorial

Cookies Setup in Apollo Studio for NodeJS GraphQL Servers

Azza Maddouri — Tue, 23 Jul 2024 23:45:29 +0000

In this tutorial, I'll guide you through enabling cookies between Apollo Studio and a NodeJS GraphQL server. We'll cover how to implement a cookie-based session approach using tools like express-session, ioredis, and connect-redis.

Setting Up Your Session with Redis

First, let's configure your session setup with Redis. Ensure your session is set up correctly with sameSite and secure cookie properties as these are necessary for the desired functionality in Apollo Studio.

const redisClient = new Redis();
redisClient.on("connect", () => {
    console.log("Redis connected");
});
redisClient.on("error", (err) => {
    console.error("Redis connection error:", err);
});

let redisStore = new RedisStore({
    client: redisClient,
    prefix: "myapp:",
    disableTouch: true
});

app.use(
    session({
        name: "myCookie",
        store: redisStore,
        cookie: {
            maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // Alive for 10 years
            httpOnly: true,
            sameSite: "none", 
            secure: true 
        },
        secret: "qpwdomwqeoxqiewpoqjh",
        resave: false,
        saveUninitialized: false,
    }),
);

Configuration for Postman and Apollo Studio

To make Postman work, switch sameSite to "lax" and secure to process.env.NODE_ENV === 'production'. For Apollo Studio, keep the configuration as shown above.

cookie: {
    sameSite: "lax", 
    secure: process.env.NODE_ENV === 'production'
}

Configuring Apollo Studio

Enable Cookies in Apollo Studio:
- Open Apollo Studio.
- Click the cog icon in the upper left-hand corner to open the connection settings dialog.
- Toggle "Include Cookies" to ON.

Server Configuration:

Add these lines right after initializing the app:

app.set("trust proxy", process.env.NODE_ENV !== "production");
app.set("Access-Control-Allow-Origin", "https://studio.apollographql.com");
app.set("Access-Control-Allow-Credentials", true);

CORS Configuration:

Add the URL to your CORS origin header and enable credentials in your server.ts:

const cors = {
    credentials: true,
    origin: "https://studio.apollographql.com",
};

Apply Middleware:
- Pass the cors when applying the Apollo Server middleware:
```
apolloServer.applyMiddleware({ app, cors });
```

Final Server Configuration

Your server.ts should look like this:

const app = express() as any;
app.set("trust proxy", process.env.NODE_ENV !== "production");
app.set("Access-Control-Allow-Origin", "https://studio.apollographql.com");
app.set("Access-Control-Allow-Credentials", true);

const redisClient = new Redis();
redisClient.on("connect", () => {
    console.log("Redis connected");
});
redisClient.on("error", (err) => {
    console.error("Redis connection error:", err);
});

let redisStore = new RedisStore({
    client: redisClient,
    prefix: "myapp:",
    disableTouch: true
});

const cors = {
    credentials: true,
    origin: "https://studio.apollographql.com",
};

app.use(
    session({
        name: "myCookie",
        store: redisStore,
        cookie: {
            maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // Alive for 10 years
            httpOnly: true,
            sameSite: "none", 
            secure: true
        },
        secret: "qpwdomwqeoxqiewpoqjh",
        resave: false,
        saveUninitialized: false,
    }),
);

const apolloServer = new ApolloServer({
    schema: await buildSchema({
        resolvers: [],
        validate: false
    }),
    context: ({ req, res }): MyContext => ({
        req,
        res,
        redis: redisClient,
    })
});

await apolloServer.start();
apolloServer.applyMiddleware({ app, cors });

Setting the `X-Forwarded-Proto` Apollo Studio Header

In the Shared headers section at the bottom of the dialog, set a header called x-forwarded-proto and assign it a value of https.

x-forwarded-proto: https

Make sure to send this header with every request. When you make a login request, you'll have your cookie set.

Then, use the Me query to check if there's a user logged in and session active.

I hope this tutorial helps you set up your cookies properly with Apollo Studio and your NodeJS GraphQL server. Happy coding! 😊

How to Install Redis on Windows Using WSL2

Azza Maddouri — Mon, 22 Jul 2024 19:45:05 +0000

Redis is not officially supported on Windows. However, you can install Redis on Windows by enabling the Windows Subsystem for Linux (WSL2), which lets you run Linux binaries natively on Windows. In this brief tutorial, I'll guide you step by step to install Redis on Windows. 🚀

Step-by-Step Guide

Enable WSL2:

Open PowerShell as an administrator and run:

 Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Install a Linux Distribution:
- Launch the Microsoft Store by running:
```
 start ms-windows-store:
```

Search for "Ubuntu" and install it.
Open Ubuntu and enter a new Unix username and password when prompted.

Set Up Redis:

Run the following commands in the Ubuntu terminal to install Redis:

 curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg

 ```bash
 echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
 ```

 ```bash
 sudo apt-get update
 ```

 ```bash
 sudo apt-get install redis
 ```

Start the Redis Server:
- After the installation is complete, start the Redis server with:
```
 sudo service redis-server start
```

Connect to Redis:
- Test that your Redis server is running by connecting with the Redis CLI:
```
 redis-cli
 127.0.0.1:6379> ping
```

Congratulations! You've successfully installed Redis on Windows. 🎉 Happy coding! I hope this helps you! 😊

References

Install Redis on Windows

DEV Community: Azza Maddouri

Apollo GraphQL Integration in Jetpack Compose

Configure Your Project

1. Update app/build.gradle.kts

2. Update libs.versions.toml

Define Package for Generated Files

Add the GraphQL Schema

Sync the Project

Update AndroidManifest.xml

Add Internet Permission

Configure Network Security for Emulator

Add the First Query

Generate the Model

Execute the First Query

Create an ApolloClient

Execute the Query

References

Cookies Setup in Apollo Studio for NodeJS GraphQL Servers

Setting Up Your Session with Redis

Configuration for Postman and Apollo Studio

Configuring Apollo Studio

Final Server Configuration

Setting the X-Forwarded-Proto Apollo Studio Header

How to Install Redis on Windows Using WSL2

Step-by-Step Guide

References

1. Update `app/build.gradle.kts`

2. Update `libs.versions.toml`

Update `AndroidManifest.xml`

Setting the `X-Forwarded-Proto` Apollo Studio Header