Skip to Content

Your first WunderGraph Application - Adding Operations

Published: October 19, 2021

Now that we've added another API, let's add an Operation to make use of it.

By convention, all Operations must be created in the directory .wundergraph/operations. Additionally, all files without the file extension .graphql will be ignored. You should also make sure to only create one Operation per file.

Now, let's create a new file with the following path: .wundergraph/operations/JspUsers.graphql with the following contents.

query JspUsers {
jsp_users {
id
name
email
}
}

Save the file to trigger the code generation and re-start the local WunderNode. You can also just restart wunderctl so that it parses the Operation and generated an Endpoint for you.

If you're keen trying this newly added Operation out before adding it to the User interface, you can do so by using curl.

curl http://localhost:9991/api/main/operations/JspUsers

WunderGraph is using a file-based system to define Endpoints, similar to NextJS. Therefore, all Operation names must be unique because the names are being used to name and distinguish the endpoints.

Adding the User Interface#

Now it's time to add the user interface. For that to work, we're leveraging file based routing of the NextJS framework. Create a file named jsonplaceholder.tsx underneath the directory pages:

pages/jsonplaceholder.tsx

Paste the following content into the file:

import {NextPage} from "next";
import {useQuery} from "../.wundergraph/generated/hooks";
const JsonPlaceholderPage: NextPage = () => {
const users = useQuery.JspUsers();
return (
<div>
<h1>
JSON Placeholder
</h1>
<p>
{JSON.stringify(users)}
{users.response.status === "ok" && users.response.body.data.jsp_users.map(user => {
return (
<div key={user.id}>
<p>
{JSON.stringify(user)}
</p>
</div>
)
})}
</p>
</div>
)
}
export default JsonPlaceholderPage;

Save the file and open the user interface (http://localhost:3000/jsonplaceholder) in your browser. You should see your newly added Operation.

Summary#

Good work! You've extended your application by another API dependency. Now we've got data from your new API into the user interface. In the next chapter, we'd like to extend our API a bit further and add links between fields.

If you like to play around with things, you can add more Operations if you like. Feel free to customize the configuration of them by applying the same techniques as used in the example Operations. E.g. adding caching, authorization rules, live Queries etc.


Product

Subscribe to our newsletter!

Stay informed when great things happen! Get the latest news about APIs, GraphQL and more straight into your mailbox.

© 2021 WunderGraph