chức năng tìm kiếm bằng cách sử dụng rơle

Question

Cách triển khai chức năng tìm kiếm bằng chuyển tiếp?

Vì vậy, công việc là

• dùng điều hướng đến search form.

không được có bất kỳ truy vấn nào (như trong vùng chứa chuyển tiếp) khi khởi tạo chế độ xem.

• người dùng điền vào giá trị trường và nhấn nút hành động/tìm kiếm.

một truy vấn tiếp sức được gửi đến máy chủ

• kết quả nhận được từ máy chủ.

trang hiển thị nó và tiếp tục hòa giải kết quả filtered với bộ nhớ cache cục bộ.

Tôi chưa thấy ví dụ về truy vấn đặc biệt nhưng chỉ là một phần của vùng chứa tiếp sức (mà nó giải quyết trước khi khởi tạo thành phần). Vì vậy, làm thế nào để mô hình nó. nó có nên giống như một đột biến không?

Answer 1

Nếu tôi hiểu chính xác, bạn không muốn gửi bất kỳ truy vấn nào cho thành phần cho đến khi người dùng nhập một số văn bản tìm kiếm, tại thời điểm đó truy vấn sẽ được gửi. Điều này có thể được thực hiện với ví dụ được đăng bởi @Xuorig, với một bổ sung: sử dụng chỉ thị @include của GraphQL để bỏ qua đoạn cho đến khi một biến được đặt. Dưới đây là ví dụ mở rộng:

export default Relay.createContainer(Search, { 
    initialVariables: { 
    count: 3, 
    query: null, 
    hasQuery: false, // `@include(if: ...)` takes a boolean 
    }, 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on Viewer { 
     # add `@include` to skip the fragment unless $query/$hasQuery are set 
     items(first: $count, query: $query) @include(if: $hasQuery) { 
      edges { 
      node { 
       ... 
      } 
      } 
     } 
     } 
    `, 
    }, 
}); 

Truy vấn này sẽ bị bỏ qua vì điều kiện bao gồm bị lỗi. Sau đó, thành phần có thể gọi setVariables({query: someQueryText, hasQuery: true}) khi nhập văn bản được thay đổi, tại thời điểm đó, điều kiện @include sẽ trở thành sự thật và truy vấn sẽ được gửi đến máy chủ.

Answer 2

Đây là cách tôi đã thực hiện tìm kiếm đơn giản trong dự án của tôi:

export default Relay.createContainer(Search, { 
    initialVariables: { 
    count: 3, 
    title: null, 
    category: null, 
    }, 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on Viewer { 
     items(first: $count, title: $title, category: $category) { 
      edges { 
      node { 
       ... 
      } 
      } 
     } 
     } 
    `, 
    }, 
}); 

hình thức tìm kiếm của bạn chỉ đơn giản là có để cập nhật các initialVariables sử dụng this.props.relay.setVariables và rơle sẽ truy vấn dữ liệu mới.