Breaking News: Grepper is joining You.com. Read the official announcement!

how to use graphql api in react

Sanvi Rahman answered on April 12, 2021 Popularity 10/10 Helpfulness 3/10

answer how to use graphql api in react

related react js and graphql integration

how to use graphql api in react

Comment

import React from "react";
import { request, gql } from "graphql-request";
import { useQuery } from "react-query";

const endpoint = "https://api.spacex.land/graphql/";
const FILMS_QUERY = gql`
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, isLoading, error } = useQuery("launches", () => {
    return request(endpoint, FILMS_QUERY);
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.freecodecamp.org

Tags: api graphql javascript

Link to this answer
Share Copy Link

Contributed on Jun 05 2022

Sanvi Rahman

0 Answers Avg Quality 2/10

Closely Related Answers

react js and graphql integration

Comment

1
2
3
npx create-react-app my-graphql-react-project
cd my-graphql-react-project
yarn add @apollo/client graphql

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.pluralsight.com

Tags: graphql

Link to this answer
Share Copy Link

Contributed on Apr 12 2021

Frantic Frog

0 Answers Avg Quality 2/10

how to use graphql api in react

Contents

More Related Answers

how to use graphql api in react

Closely Related Answers

react js and graphql integration

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.