Skip to Content

Your first WunderGraph Application - Adding Operations

Now that we've added another API, let's add an Operation to make use of it. Open up the operations file (.wundergraph/wundergraph.app.operations.graphql) so that we can modify it.

Add this Operation to the end of the file.

query JspUsers {
jsp_users {
id
name
email
}
}

Save the file to trigger the code generation and re-start the local WunderNode.

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

Operations must always be named

Keep in mind that when using WunderGraph, all operations must always be named. Additionally, names must be unique, although this is a general rule of GraphQL query validation.

Naming all Operations is required so that each of them gets their own endpoint. It also makes generating code a lot easier and you don't have to keep Operation hashes in mind.

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