Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// npm install @apollo/client graphql

import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery, useMutation } from '@apollo/client';

// 1. Create client
const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache(),
  headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
});

// 2. Wrap app
function App() {
  return <ApolloProvider client={client}><Posts /></ApolloProvider>;
}

// 3. Query hook
const GET_POSTS = gql`
  query GetPosts($limit: Int!) {
    posts(first: $limit) {
      edges { node { id  title  author { name } } }
    }
  }
`;

// 4. Mutation hook
const CREATE_POST = gql`
  mutation CreatePost($input: CreatePostInput!) {
    createPost(input: $input) { id  title }
  }
`;