[gql] add a spans connection to a project

[mikeldking]

{
   project: node(id: "asdfasdfa") {
        ... on Project {
             spans() {
                 edges {
                    span: node {
                        span_kind
                     }
                 }
             }
        }
   }
}

[dosubot[bot]]

Based on the code snippet you provided, it seems like you're trying to fetch data from a spans connection in a GraphQL project. I found a similar issue in the Arize Phoenix repository titled [gql] spans connection which was resolved by a pull request: feat(tracing): launch_app with traces.

To add a spans connection to a project in GraphQL, you would typically follow these steps:

1. Define the GraphQL Mutation or Query: Given the context, it seems you are more likely fetching data rather than mutating it, so you would define a query. However, the provided code snippet is a fragment and not a complete query or mutation definition.

2. Use the Fragment in a Query: The provided code snippet is a fragment named SpansTable_spans. To use this fragment, you need to include it in a GraphQL query. This query should be defined in your GraphQL operations (e.g., queries.graphql or directly in your application code if you're using inline GraphQL).

3. Example Query Using the Fragment:

   query SpansTableQuery($after: String, $filterCondition: YourFilterInputType, $first: Int, $sort: YourSortInputType) {
   ...SpansTable_spans @arguments(after: $after, filterCondition: $filterCondition, first: $first, sort: $sort)
   }

   This query uses the @arguments directive to pass variables to the fragment for pagination and filtering. You need to replace YourFilterInputType and YourSortInputType with the actual input types defined in your GraphQL schema for filtering and sorting spans.

4. Integrate Query in Your Project: Once you have defined the query, you need to integrate it into your project. This involves using a GraphQL client library such as Apollo Client or Relay in your application. The integration process will depend on the library you are using.

5. Fetching Data: Use the GraphQL client library to fetch data by executing the query you defined. For example, if you are using Apollo Client, you would use the useQuery hook in a React component to fetch the data and display it in your UI.

6. Refetching and Pagination: The provided fragment is designed to support pagination ("connection": [...] part in the metadata). You can use the after argument to fetch subsequent pages of data. The client library you choose will have specific ways to handle pagination and refetching.

Here is a simplified example using Apollo Client in a React component:

import { useQuery } from '@apollo/client';
import { SPANS_TABLE_QUERY } from './queries'; // Import your query

const SpansTable = () => {
  const { loading, error, data } = useQuery(SPANS_TABLE_QUERY, {
    variables: { first: 10, after: null, filterCondition: {}, sort: { col: "startTime", dir: "desc" } },
  });

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

  return (
    <div>
      {/* Render your spans data here */}
    </div>
  );
};

The spans connection in the Arize Phoenix GraphQL schema is structured as follows:

• spans: A connection that contains an array of edges, where each edge represents a span.
  • edges: An array where each element contains:
  • span: The actual span data, which includes:
    • context: Contains the span's unique identifiers:
    • spanId: The unique identifier for the span.
    • traceId: The unique identifier for the trace the span belongs to.
    • documentRetrievalMetrics: An array of metrics related to document retrieval, each containing:
    • evaluationName: The name of the evaluation.
    • hit: The hit metric (optional).
    • ndcg: The normalized discounted cumulative gain metric (optional).
    • precision: The precision metric (optional).
    • input: The input to the span (optional), containing:
    • mimeType: The MIME type of the input.
    • value: The value of the input.
    • latencyMs: The latency of the span in milliseconds (optional).
    • metadata: Additional metadata for the span (optional).
    • name: The name of the span.
    • output: The output from the span (optional), containing:
    • mimeType: The MIME type of the output.
    • value: The value of the output.
    • spanEvaluations: An array of evaluations related to the span, each containing:
    • label: The label of the evaluation (optional).
    • name: The name of the evaluation.
    • score: The score of the evaluation (optional).
    • spanKind: The kind of the span, which can be one of several predefined types such as "agent", "chain", "embedding", etc.
    • startTime: The start time of the span.
    • statusCode: The status code of the span, which can be "ERROR", "OK", or "UNSET".
    • tokenCountCompletion: The token count for completion (optional).
    • tokenCountPrompt: The token count for the prompt (optional).
    • tokenCountTotal: The total token count (optional).

This structure is defined within a TypeScript file that appears to be generated by a tool (likely for use with Relay, a GraphQL client for React), and it includes types and fields that describe how spans are represented in the GraphQL schema for the Arize Phoenix application. You can find more details in the app/src/pages/tracing/generated/SpansTable_spans.graphql.ts file.

I hope this helps! If you have any more questions or need further clarification, feel free to ask.

Sources

• [gql] spans connection
• app/src/pages/tracing/generated/SpansTable_spans.graphql.ts

#### About Dosu

This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. If you want to continue the conversation, start your reply with @dosu-bot.