# npm
npm i --save urql graphql
# or yarn
yarn add urql graphql

import { createClient, Provider } from 'urql';

const client = createClient({
  url: 'https://0ufyz.sse.codesandbox.io'
});

const App = () => (
  <Provider value={client}>
    <Todos />
  </Provider>
);

npm install @apollo/client graphql

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

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
});

function App() {
  return (
    <ApolloProvider client={client}>
      <div>
        <h2>My first Apollo app 🚀</h2>
      </div>
    </ApolloProvider>
  );
}

import { useQuery } from 'urql';

const Todos = () => {
  const [res] = useQuery({
    query: `
      query { todos { id text } }
    `,
  });
  
  if (res.fetching) return <p>Loading...</p>;
  
  if (res.error) return <p>Errored!</p>;
  
  return (
    <ul>
      {res.data.todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

import { useQuery, gql } from '@apollo/client';

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

import { createClient, dedupExchange, fetchExchange } from 'urql';

const noopExchange = ({ client, forward }) => {
  return operations$ => {
    // <-- The ExchangeIO function
    // We receive a stream of Operations from `dedupExchange` which
    // we can modify before...
    const forwardOperations$ = operations$;
    // ...calling `forward` with the modified stream. The `forward`
    // function is the next exchange's `ExchangeIO` function, in this
    // case `fetchExchange`.
    const operationResult$ = forward(operations$);
    // We get back `fetchExchange`'s stream of results, which we can
    // also change before returning, which is what `dedupExchange`
    // will receive when calling `forward`.
    return operationResult$;
  };
};

const client = createClient({
  exchanges: [dedupExchange, noopExchange, fetchExchange],
});

import { useQuery } from 'urql';

const [res] = useQuery({
  query: `
    query { todos { id text } }
  `,
  requestPolicy: "cache-and-network",
});

import { createClient, dedupExchange, cacheExchange, fetchExchange } from 'urql';
import { requestPolicyExchange } from '@urql/exchange-request-policy';
 
const client = createClient({
  url: 'http://localhost:1234/graphql',
  exchanges: [
    dedupExchange,
    requestPolicyExchange({
      // The amount of time in ms that has to go by before upgrading, default is 5 minutes.
      ttl: 60 * 1000, // 1 minute.
      // An optional function that allows you to specify whether an operation should be upgraded.
      shouldUpgrade: operation => operation.context.requestPolicy !== 'cache-only',
    }),
    cacheExchange,
    fetchExchange,
  ],
});

import { cacheExchange } from "@urql/exchange-graphcache";

const client = new Client({
  exchanges: [dedupExchange, cacheExchange({}), fetchExchange],
});

const [res] = useQuery({
  query: `
    query { todos { id text } }
  `,
});

const UpdateTodo = `
  mutation ($id: ID!, $title: String!) {
    updateTodo (id: $id, title: $title) {
      id
      title
    }
  }
`;

const Todo = ({ id, title }) => {
  const [updateTodoResult, updateTodo] = useMutation(UpdateTodo);
};

export const createPostUpdate = (cache, { data }) => {
  if (!data || !data.createPost) {
    return;
  }
  const createPost = data.createPost;
  const variables = { groupId: createPost.feedItem.data.group_id || undefined };
  const cachedFeed = cache.readQuery({
    query: GET_FEED,
    variables
  });
  const existing = cachedFeed.feed.items.path === createPost.feedItem.path;
  if (!existing) {
    cache.writeQuery({
      query: GET_FEED,
      variables,
      data: {
        ...cachedFeed,
        feed: {
          ...cachedFeed.feed,
          items: [createPost.feedItem, ...cachedFeed.feed.items]
        }
      }
    });
  }
};

const UpdateTodo = `
  mutation ($id: ID!, $title: String!) {
    updateTodo (id: $id, title: $title) {
      id
      title
    }
  }
`;

const cacheExchangeConfig = {
  keys: {
    SomeFieldWithoutId: data => /* calculate id here based on parent */,
  },
}

const cacheExchangeConfig = {
  keys: {
    SomeFieldWithoutId: () => null,
  },
}

import { cacheExchange } from "@urql/exchange-graphcache";

const cacheExchangeConfig = {
  updates: {
    updateToDoListComplete: (
      mutationResult: CompleteToDoType,
      _: any,
      cache: any,
    ) => {
      // if the user completed the last item in their ToDo list, remove it from their profile
      if (mutationResult.updateTodoListComplete.completedPercentage === 1) {
        cache.updateQuery({ query: currentUserQuery }, (data: any) => {
          data.currentUser.currentToDoList = null;
          return data;
        });
      }
    },
  }
}

const client = new Client({
  exchanges: [dedupExchange, cacheExchange(cacheExchangeConfig), fetchExchange],
});

# npm
npm i @urql/devtools

# yarn
yarn add @urql/devtools

import { createClient, defaultExchanges } from 'urql';
import { devtoolsExchange } from '@urql/devtools';

const client = createClient({
  url: 'http://localhost:3001/graphql',
  exchanges: [devtoolsExchange, ...defaultExchanges],
});

npx urql-devtools