;
```
These types and objects are exact representations of your GraphQL API and the queries you've written and are what will bridge the gap between your API and your client.
## Replace the manually entered types [#replace-the-manually-entered-types]
Now that you have types generated from the API itself, you will replace your manually written types with those types.
Head over to `src/types.ts`. At the very top of that file import the `GetUsersQuery` type from `src/graphql/generated.ts`:
```ts
// src/types.ts
import type { GetUsersQuery } from "./graphql/generated";
// ...
```
The reason you import this type instead of the full `User` and `Note` types is that the `GetUsersQuery` type has access to a more specific set of types that contain only the fields your query retrieves.
Replace the existing types in that file with the following to expose the types representing your query results:
```ts
// src/types.ts
import type { GetUsersQuery } from "./graphql/generated";
export type Message = GetUsersQuery["users"][0]["messages"][0];
export type User = GetUsersQuery["users"][0];
```
If you head over to `src/components/UserDisplay.tsx` and inspect the type being used for the `user` prop, you will now see it uses the type generated from your GraphQL query and API:
You now have almost every piece of the end-to-end type-safety puzzle put in place. Your types are in sync from your database all the way to your frontend application.
The only thing missing is actually digesting your API rather than using static data. You will want to do this in a type-safe way to ensure you are querying only for data that exists in your API and retrieving all of the fields your frontend expects.
GraphQL Codegen already generated the types and query objects required to do this. You just need to use them!
## Install and set up urql [#install-and-set-up-urql]
To query your GraphQL API you will use [urql](https://formidable.com/open-source/urql/), a GraphQL client library that allows you to easily query a GraphQL API and integrates with React.
You will first need to install the dependency:
```sh
npm i urql
```
This library provides you with two exports you will need: A `Provider` component and a `createClient` function.
You will need to use the `Provider` and `createClient` functions to provide urql to your application. In `src/main.tsx`, import those from the urql library:
```ts
// src/main.tsx
// ...
import { createClient, Provider } from 'urql';
// ...
```
Next, use the `createClient` function to create an instance of the urql client. The client takes in a configuration object with a `url` key, which points to your GraphQL API's url.
While developing locally this should be `http://localhost:4000/graphql`, however once the API is deployed this will need to change. Use an environment variable allow you to provide an API url via the environment, while falling back to the localhost URL in development:
```ts
// src/main.tsx
// ...
const client = createClient({
url: import.meta.env.VITE_API_URL || 'http://localhost:4000/graphql',
});
// ...
```
The last step to provide urql to your application is to wrap your `App` component in the urql `Provider` component and pass that component the instantiated client:
```tsx
diff
// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { createClient, Provider } from 'urql';
const client = createClient({
url: import.meta.env.VITE_API_URL || 'http://localhost:4000/graphql',
});
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
)
```
## Query your data [#query-your-data]
You can now use urql to query your data! Head over to `src/App.tsx` and import the `useQuery` function from urql. Also import the `GetUsersDocument` object from `graphql/generated.ts`, as this will contain the AST representation of your query:
```tsx
// src/App.tsx
// ...
import { useQuery } from 'urql'
import { GetUsersDocument } from './graphql/generated'
// ...
```
Within the `App` function, you can now replace the static variable and data with the following query:
```tsx
// src/App.tsx
// ...
function App() {
const [results] = useQuery({
query: GetUsersDocument
})
// ...
}
// ...
```
This uses the `GetUserDocument` query object to request data from your API and return it in a properly typed variable.
You no longer need the `User` type import because the typing is already being specified in the `GetUsersDocument` object. You will also need to adjust the code used to map over each user in the JSX, as the query results are now returned in a nested object. The resulting file should look as follows:
```tsx
// src/App.tsx
import UserDisplay from './components/UserDisplay'
import { useQuery } from 'urql'
import { GetUsersDocument } from './graphql/generated'
function App() {
const [results] = useQuery({
query: GetUsersDocument
})
return (
{
results.data?.users.map((user, i) => )
}
)
}
export default App
```
Notice your API request results are properly typed based off of the types within the API itself! If both your API and Client are running, head over to the browser. You should now see all of your data!
Congrats! 🎉 At this point, you have implemented a completely end-to-end type safe application with two separate pieces: an API and the client.
The only thing left to do is deploy the project so you can share it!
## Push your projects to Github [#push-your-projects-to-github]
You will be using [Render](https://render.com/) to deploy both of your codebases. Before doing so, however, you need to host your code on Github.
> **Note**: If you don't already have a Github account, you can create one for free [here](https://github.com/signup).
In the top left corner of the home page, hit the **New** button to create a new repository:
Give your repository a name and then hit **Create repository**:
You will need to retrieve the SSH url for this repository to use later on. Grab that from the location shown below:
Now within your React application, run the follwing command to initialize and push a local repository, replacing `` with the SSH url:
```sh
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin
git push -u origin main
```
```sh
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:sabinadams/e2e-type-safety-client.git
git push -u origin main
```
Next, you will repeat these steps for your API's codebase.
Create another new repository from your Github dashboard:
Title the repository and hit **Create repository**:
You should again see a page with some setup instructions. Grab the SSH url from the same location as before:
Finally, navigate via the terminal into your GraphQL API's codebase and run the following set of commands. Again, replace `` with your SSH url:
```sh
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin
git push -u origin main
```
```sh
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:sabinadams/e2e-type-safety-api.git
git push -u origin main
```
## Deploy the API [#deploy-the-api]
Now that your code is available on Github, you can deploy your codebases!
Head over to [Render](https://render.com) and create a free account if you do not already have one.
The first thing you will deploy is your GraphQL API. On your dashboard, hit the **New Web Service** button, which will allow you to deploy a Node.js application:
On this page, if you haven't already, click **+ Connect account** under the **Github** header to give Render access to list your Github repositories:
After connecting your account, you should see your repositories available under the **Connect a repository** header. Choose your GraphQL API repository.
You will be prompted for a few different options:
1. **name**: Pick any name you'd like
2. **Environment**: `Node`
3. **Region**: Stick with the default
4. **Branch**: `main`
5. **Build Command**: `npm run build`
6. **Start Command**: `npm run dev`
Beneath those options, choose the **Free** plan:
Expand the **Advanced** section near the bottom of the page. Here you will define an environment variable that will hold your database URL.
Click the **Add Environment Variable** button and add a variable named `DATABASE_URL` whose value is the connection string to your Postgres database:
Finally, at the bottom of the page, hit the **Create Web Service** button:
This will trigger the deployment process! Once that finishes deploying, you will be able to access the URL Render provides to see your GraphQL API.
Copy the URL from the location shown below and navigate to it in a new browser window at the `/graphql` route:
## Deploy the React application [#deploy-the-react-application]
Now that your API is deployed, you will deploy your React application.
Head back over to the Render dashboard and hit the **New** button at the top of the page. Choose the **Static Site** option:
Connect this static site to your React application's Github repostory.
You will be prompted again to fill out some details for deploying this application:
1. **name**: Pick any name you'd like
2. **Branch**: `main`
3. **Build Command**: `npm run build`
4. **Publish directory**: `dist`
Under the **Advanced** section, add an environment variable named `VITE_API_URL` whose value is the URL of your deployed GraphQL API at the `/graphql` route. For example:
Finally, hit the **Create Static Site** button at the bottom of the page to deploy the application.
When that finishes deploying, head over to the URL available at the top of the page. If all went well, you should see your application is live!
## Summary & Final thoughts [#summary--final-thoughts]
In this article, you finished up your application and deployed it! Along the way you:
* Set up GraphQL Codegen to keep your TypeScript types in sync across your entire stack
* Published both of your codebases to Github
* Deployed both of your applications using Render
In this series, you walked through every step of building a fully type-safe application using Prisma, GraphQL, and React as the main technologies. The power of all the tools you used combined is pretty amazing and allows you to build a scalable, safe application.
If you have any questions about anything covered in this series, please feel free to reach out to me on [Twitter](https://twitter.com/sabinthedev).