examples/with-graphql

GraphQL example

This is an example of setting up a graphQL server in an Expo Router API route and using it in the app and web code. The example also includes automatic type generation powered by gql.tada.

Deployed demo: https://with-graphql.expo.app/

Launch your own

Tools used

• GraphQL Yoga - graphQL server
• URQL - graphQL client (Apollo Client can also be used if preferred)
• gql.tada - for type generation
• Expo Router API Route - for server-side code
• EAS Hosting - for API & web deployments

Notable files

• src/app/api/graphql+api.ts - this is your graphQL endpoint. It exports a function called POST, so all calls to POST /graphql will execute this function
• src/schema.graphql - your GraphQL schema. It is generated based on the schema in POST /graphql. After making changes to the schema, run npm run sync:schema to update it
• src/server - this is a folder for your server code. With file-based routing, any file in the /app folder will become a screen or a route in your app, so this is handy for storing utilities and other necessities for your server code
• .vscode/settings.json - enables automatic type generation in VSCode
• src/graphql-env.d.ts - these are your types, auto-generated based on the queries (change the query in src/queries.ts to see it change). This file will get automatically updated as you change your queries, but you can also update it manually with npm run sync:types

Using this example

Create a new project with this example:

npx create-expo-app --example with-graphql

And then npx expo start to run it locally (scan the QR code, or w to open web, a to open android, i to open iOS).

Updating GraphQL code

After making a change in src/app/api/graphql+api.ts (e.g. adding a new resolver), refetch the schema with:

npm run sync:schema

Note

The API must be running at npx expo start when running that script, so that the introspection query can call the GraphQL endpoint.

Now add a query anywhere in the src folder (the src/queries.ts file is a convenience, but not necessary).

If you're using VSCode, Cursor or other editing tool, the src/graphql-env.d.ts file should update automatically based on the query you updated. If you're not using an editor or want to run the type generation manually, run:

npm run sync:types

Deploying this example

See a deployed version of this example at https://with-graphql.expo.app.

To deploy the API only (for use in your iOS and Android apps and without the web UI), export the API bundle:

npx expo export --platform web --no-ssg

Deploy to EAS Hosting:

npx eas-cli deploy --prod

This will print out a production URL, like https://your-chosen-name.expo.app: your API will be available from https://your-chosen-name.expo.app/api/graphql.

To test the deployed API in your local project, copy .env.example into .env.local and add

EXPO_PUBLIC_API_URL=https://your-chosen-name.expo.app

To deploy the API including the web UI, export without the no-ssg flag:

npx expo export --platform web
npx eas-cli deploy --prod

iOS	Android