Sign up

smith / newrelic-graphql-react-example
Example of using the New Relic GraphQL API in a front-end React application
Apache-2.0 License
2 stars 0 forks

Star
Watch

Code
Issues
Pull requests 3

Actions
Security
Insights

master
Go to file

View code

README.md

New Relic GraphQL React Example

This repository contains an example React application (bootstrapped with Create React App) that demonstrates use of
the New Relic GraphQL API in a front-end application.

Installation
You'll need Node.js and Yarn installed.
Run yarn to install the dependencies.

Get your New Relic API key

You'll need an API key to authenticate against the GraphQL API. Go to the New Relic GraphQL API explorer and log in if
prompted.
Select an existing API key or create a new API key by selecting an account from the the dropdown menu in the GraphiQL
title bar.
Create a GraphQL query to get your API key. It should look like:

{
requestContext {
apiKey
}
}

Click here to go directly to this query in the explorer.

The apiKey value is what you'll be using to start the application.

Run the application

Given your API key is YOUR_API_KEY , Run:

env REACT_APP_API_KEY=YOUR_API_KEY yarn start

This will start the application on port 3000 and open a browser window.
Congratulations! You've just connected to the New Relic GraphQL API!

Generating type information

Since the GraphQL API has a strongly-typed schema, we can introspect this schema and the queries in our application to
generate TypeScript type information.
schema.json contains the API schema. If you need to download a more up to date version of the schema run:

env REACT_APP_API_KEY=YOUR_API_KEY yarn run schema:download

src/types contains the default generated type information based on the schema and the existing queries.
If you change your queries you can run:

yarn run codegen:generate

to generate updated type annotations. Adding --watch will run a process to continuously update the annotations when
queries are changed.
For example, src/index.tsx imports the UserQuery type and uses it to specify the type of the data object in the query.
Your text editor can provide autocompletion and inline documentation for these types.

Deployment to production
DON'T!
This repository is for example purposes only. If you compile the code and host it publically, your API key WILL BE
COMPROMISED. Since this is a front-end only JavaScript application, anyone using the application will be able to see
your API key in the request headers used in the GraphQL queries.
If you must make a build of the static files, it can be done with:

yarn run build

 Creating an application that securely provides API authentication without compromising an API key is left as an exercise
to the reader.

What's next?
You can use the documentation and API explorer to see everything that's possible.
Making changes in the application will cause the page to reload with new results.
More help can be found on the New Relic Explorers Hub.

Releases
No releases published

Contributors 2

Languages

JavaScript 80.3% TypeScript 16.0% HTML 2.5% CSS 1.2%

© 2020 GitHub, Inc.

Terms
Privacy
Security
Status
Help
Contact GitHub
Pricing
API
Training
Blog
About