Fetching with OneGraphApolloClient and hooks

[bdougie]

Questions

Do you have examples of someone using OneGraph with @apollo/react-hooks?

My Attempt:

I am attempting to add caching in this draft PR: bdougie/open-sauced#379.

@apollo/react-hooks
apollo-cache-inmemory

import {useApolloClient, useQuery} from "@apollo/react-hooks";
import {gql} from "apollo-boost";

const fetchGoalsQuery = gql`
  query FetchGoals($name: String!) {
    gitHub {
      viewer {
        repository(name: $name) {
          id
          issues(first: 10, states: OPEN, orderBy: {direction: DESC, field: CREATED_AT}) {
            totalCount
            nodes {
              id
              title
              body
              number
              labels(first: 3) {
                nodes {
                  color
                  name
                  id
                }
              }
            }
          }
        }
      }
    }
  }
`;

// useQuery succeeds but the data and error returns undefined. 
const {data, error} = useQuery(fetchGoalsQuery, {name: "open-sauced-goals"});

// data and error are undefined
console.log("error", error);
console.log("data", data);

[bdougie]

I was able to get this to work without hooks. I ended up using zeit/swr. It has less assumptions about my GraphQL Client setup. Since I am using the onegraph-auth package requires a slightly different setup for the client, which was clashing with the apollo/react-hooks.

useSWR allowed me to leverage my existing onegraph fetcher to return data and populate my cache.

Once I clean this up I might wrap this in a custom hook.

import useSWR from "swr";

const {data, error, loading} = useSWR({}, query);